微信小程序--代码编写--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：

1. 当设置 position 为 top 时，将不会显示 icon
2. tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

 

 

 

 

调试结果如下：

 

转载于:https://www.cnblogs.com/Catherinezhilin/p/8830956.html