在很多App中，首页的下方通常会出现3到5个TabBar按钮，如图1所示。通过这些按钮，可以切换到不同的页面。其实这也属于导航的一种方式。
图1 App中TabBar的效果
其实小程序可以用非常简单的方式来实现这个效果，这一切不需要编写一行JavaScript代码。现在准备3个页面，如果是新建的小程序工程，默认会建立两个页面：index和logs，我们可以再建立一个page页面（新加的页面不要忘了在app.json文件中配置）。包含3个页面的工程结构如图2所示。
图2 工程目录结构
添加TabBar按钮，只需在app.json文件中添加tabBar属性即可，代码如下：
{ … … "tabBar": { "color": "#dddddd", // 未选中状态按钮文字的颜色 "selectedColor": "#3cc51f", // 选中状态按钮文字的颜色 "backgroundColor": "#ffffff", // 背景色 "list": [{ // 该数组元素表示TabBar按钮 "pagePath": "pages/index/index", // 当前按钮指向的页面 "iconPath": "../../images/face1.png", // 未被选中时的按钮图像文件路径 "selectedIconPath": "../../images/face.png", // 被选中时的按钮图像文件路径 "text": "页面1" }, { "pagePath": "pages/logs/logs", // 当前按钮指向的页面 "iconPath": "../../images/wechat.png", "selectedIconPath": "../../images/wechatHL.png", "text": "页面2" } , { "pagePath": "pages/page/page", // 当前按钮指向的页面 "iconPath": "../../images/wechat.png", "selectedIconPath": "../../images/wechatHL.png", "text": "页面3" } ] }}
运行程序后，会显示如图3所示的效果。点击TabBar按钮可切换不同的页面。
图3 带TabBar的小程序
实际上，通过将tabBar的position属性值设为top，会将按钮放到页面上方，不过图像就不会显示了，效果如图4所示。
图4 在页面顶端显示TabBar的效果
对本文感兴趣，可以加李宁老师微信公众号（unitymarvel）：
关注 极客起源 公众号，获得更多免费技术视频和文章。