小程序中tabBar的使用
知晓程序员，专注微信小程序开发的程序员！
今天说说tabBar的使用，先看看官方说法：如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
备注：
- 当设置 position 为 top 时，将不会显示 icon
- tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
（tabBar图例讲解）
今天在做投一个小程序时，也用到了tabBar，先看一下示例：
为什么没有自己实现tabBar？因为自己实现的tabBar，没有官方的常驻底部的效果好，官方的组件也有限制：不能完全满足自定义需求。比如不支持iconfont图标，也不能展示其他样式风格。
不废话，来看代码吧，代码需要在app.json中进行配置，如下：
"tabBar": {
"color": "#7f8389",
"selectedColor": "#00a8f3",
"borderStyle": "black",
"backgroundColor": "#f7f7fa",
"list": [
{
"pagePath": "pages/index/index",
"text": "新建投票",
"iconPath": "images/create_vote.png",
"selectedIconPath": "images/create_vote_selected.png"
},
{
"pagePath": "pages/square/square",
"text": "投票广场",
"iconPath": "images/square_vote.png",
"selectedIconPath": "images/square_vote_selected.png"
},
{
"pagePath": "pages/myvote/myvote",
"text": "我的投票",
"iconPath": "images/my_vote.png",
"selectedIconPath": "images/my_vote_selected.png"
}
]
}参数说明：
color：tab 上的文字默认颜色
selectedColor： tab 上的文字选中时的颜色
backgroundColor：tab 的背景色
borderStyle：tabbar上边框的颜色， 仅支持 black/white
position：可选值 bottom、top
注：color颜色请一定写成十六进制颜色，不要用RGB颜色，IOS设备上不识别RGB颜色~
可能会踏的坑：
其他页面，如果需要跳转至带tabBar的页面，必须使用wx.swichTab()，使用wx.navigateTo()和wx.redirectTo()都无效~
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2017-11-23，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读