微信小程序--代码编写--Tabbar配置
实现静态的小程序Demo
1 { 2 "pages":[ 3 "pages/index/index", 4 "pages/join/join", 5 "pages/logs/logs" 6 ], 7 "window":{ 8 "backgroundTextStyle":"light", 9 "navigationBarBackgroundColor": "#0f0", 10 "navigationBarTitleText": "这是第一个测试小程序Demo", 11 "navigationBarTextStyle":"black" 12 }, 13 "tabBar": { 14 "selectedColor": "#00f", 15 "list": [{ 16 "pagePath": "pages/index/index", 17 "text": "首页", 18 "iconPath": "images/home.jpg", 19 "selectedIconPath": "images/home1.jpg" 20 }, 21 { 22 "pagePath": "pages/join/join", 23 "text": "加入", 24 "iconPath": "images/join_p.jpg", 25 "selectedIconPath": "images/join_n.jpg" 26 }] 27 } 28 }
代码分析:
13行:
"tabBar":
tabBar
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
Tip:
- 当设置 position 为 top 时,将不会显示 icon
- tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
调试结果如下: