在很多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的效果