【微信小程序】全局配置 - tabBar
目录
全局配置 - tabBar
1. 什么是 tabBar
2. tabBar 的 6 个组成部分
3. tabBar 节点的配置项
4. 每个 tab 项的配置选项
全局配置 - 案例:配置 tabBar
1. 需求描述
2. 实现步骤
3. 步骤1 - 拷贝图标资源
4.步骤2 - 新建 3 个对应的 tab 页面
5. 步骤3 - 配置 tabBar 选项
6. 完整的配置代码
全局配置 - tabBar
1. 什么是 tabBar
- 底部 tabBar
- 顶部 tabBar
- tabBar中只能配置最少 2 个、最多 5 个 tab 页签
- 当渲染顶部 tabBar 时,不显示 icon,只显示文本
2. tabBar 的 6 个组成部分
3. tabBar 节点的配置项
属性 | 类型 | 必填 | 默认值 | 描述 |
position | String | 否 | bottom | tabBar 的位置,仅支持 bottom/top |
borderStyle | String | 否 | black | tabBar 上边框的颜色,仅支持 black/white |
color | HexColor | 否 | tab 上文字的默认(未选中)颜色 | |
selectedColor | HexColor | 否 | tab 上的文字选中时的颜色 | |
backgroundColor | HexColor | 否 | tabBar 的背景色 | |
list | Array | 是 |
tab 页签的列表,
最少 2 个、最多 5 个 tab
|
4. 每个 tab 项的配置选项
属性 | 类型 | 必填 | 描述 |
pagePath | String | 是 | 页面路径,页面必须在 pages 中预先定义 |
text | String | 是 | tab 上显示的文字 |
iconPath | String | 否 | 未选中时的图标路径;当 postion 为 top 时,不显示 icon |
selectedIconPath | String | 否 | 选中时的图标路径;当 postion 为 top 时,不显示 icon |
全局配置 - 案例:配置 tabBar
1. 需求描述
2. 实现步骤
3. 步骤1 - 拷贝图标资源
4.步骤2 - 新建 3 个对应的 tab 页面
通过 app.json 文件的 pages 节点,快速新建 3 个对应的 tab 页面,示例代码如下:
其中,home 是首页,message 是消息页面,contact 是联系我们页面。
5. 步骤3 - 配置 tabBar 选项
6. 完整的配置代码
{"pages": ["pages/home/home","pages/message/message","pages/contact/contact"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#f12321","navigationBarTitleText": "测试","navigationBarTextStyle": "white"},"tabBar": {"list": [{"pagePath": "pages/home/home","text": "首页","iconPath": "/images/tabs/home.png","selectedIconPath": "/images/tabs/home-active.png"},{"pagePath": "pages/message/message","text": "消息","iconPath": "/images/tabs/message.png","selectedIconPath": "/images/tabs/message-active.png"},{"pagePath": "pages/contact/contact","text": "联系我们","iconPath": "/images/tabs/contact.png","selectedIconPath": "/images/tabs/contact-active.png"}]},"style": "v2","sitemapLocation": "sitemap.json"
}
【微信小程序】全局配置 - tabBar相关推荐
- 逆战之微信小程序全局配置
微信小程序之全局配置-1 小程序的配置分为全局配置.页面配置及sitemap 配置 全局配置 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置.文件内容为一个 JSON 对象,有以 ...
- php小程序开发实例,微信小程序全局配置开发实例
本文主要和大家分享微信小程序全局配置开发实例,主要以代码的形式和大家分享,希望能帮助到大家. 一.app.json 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设 ...
- uni-app 微信小程序全局配置分享好友、朋友圈...
使用uni-app在实际项目中开发微信小程序,经常会遇到给项目添加分享给微信好友.朋友圈...功能,一般来说要将某个页面分享出去,就要在当前页面添加: <template> <vie ...
- 微信小程序全局配置参数详解app.json
全局配置 cc文件内容为一个 JSON 对象,有以下属性: 配置项 entryPagePath 指定小程序的默认启动路径(首页),常见情景是从微信聊天列表页下拉启动.小程序列表启动等.如果不填,将默认 ...
- 微信小程序全局配置分享指定标题、图片、路径
在app.js页面中的onLaunch里添加以下代码 //重写分享方法wx.onAppRoute(function (res) {//获取加载的页面let pages = getCurrentPage ...
- 微信小程序 php配置,微信小程序的配置
我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 以下是一个包含了所有配置选项的简单配置app.json{ "pa ...
- 微信小程序—相关配置
目录 微信小程序介绍 什么是小程序? 小程序可以干什么? 相关资料 第一个小程序 申请帐号 测试号申请 安装开发工具 你的第一个小程序 编译预览 目录结构 JSON 配置 小程序配置 app.json ...
- 微信小程序之配置app.json
微信小程序之配置app.json 本人写了一个在线扫码借书的小程序,打算分享一下心得和代码,欢迎关注,再次希望各位大佬指出不足 {"pages": ["pages/ind ...
- 微信小程序动态设置tab-bar
微信小程序动态设置tab-bar(自定义) 配置自定义tab-bar的方法这里省略,可以参考官方文档 动态设置tab-bar 需求:根据权限判断底部tab-bar显示内容 例如普通用户这里不显示赛事t ...
- 微信小程序-页面配置-界面显示部分
微信小程序-页面配置-界面显示部分 配置项 singlePage 小结: 每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置. 页面中配置项在当前页面会覆盖 app.json 的 ...
最新文章
- git bash打印当前文件结构_6 个方便的 Git 脚本
- 常用SQL语句优化技巧总结
- 京东DNN Lab首席科学家:用深度学习搞定80%的客服工作
- 成功解决.append方法出现错误IndexError: list index out of range
- C++实现complex number复数的算法(附完整源码)
- 前端后台管理系统梳理
- 配置Tomcat的日志系统
- 【实践案例】Databricks 数据洞察在美的暖通与楼宇的应用实践
- Hadoop学习总结(3)——Hadoop伪分布式环境搭建
- 6 个步骤,搞定 AI 车牌识别器!(附详细分析)
- CentOS安装tengine(淘宝服务器)
- raw格式转换jpg软件 V5.2
- JavaScript图片跟随鼠标移动
- 教你轻松查看QQ空间加密后的好友图片
- android顶部导航高度,快速实现顶端导航栏(ToolBar+TabLayout+Viewpager)
- 1药网母公司路演PPT曝光:发行区间14到16美元 中旬上市
- Vue实现图形化积木式编程(一)
- 扔旧被子扔掉霉运_您应该扔掉所有高科技产品盒吗?
- 【ChatGPT】中国支付清算协会倡议支付行业从业人员谨慎使用ChatGPT
- 1024 献礼,10 个前端开发者必收的高赞资源
热门文章
- win10用android手柄游戏手柄,win10系统使用游戏手柄的步骤
- CHK文件恢复工具、软件(CHKRecovery V2.0)
- 安工大matlab实验报告王朋飞,计算机仿真实验
- 远程桌面连接:使用lcx进行端口转发
- 华为linux用什么浏览器,Linux系统浏览器最受用户欢迎前十排名
- C#+ AE实现地图注记功能
- 房产中介管理系统软件的开发和使用(附源码)
- Cisco Packet Tracer教程
- 启动不了 驱动程序签字功能,bios关闭驱动数字签名 如何在bios禁用驱动程序签名,装系统,启动行为那个无效?...
- pano2vr怎么制作漫游_全景图如何制作?Pano2VR制作FLASH全景图图文教程(附Pano2VR下载)...