在微信小程序的开发当中会遇到底部多tab栏切换的需求,这时候就需要使用微信小程序的tabber,通过配置tabber即可实现底部多tab栏跳转切换的功能。
1、在小程序app.json中加入tabBer
"tabBar": {
"color": "#9e9e9e",
"selectedColor": "#d03a29",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/icon1.png",
"selectedIconPath": "images/icon1_on.png"
},
{
"pagePath": "pages/hdbm/hdbm",
"text": "活动报名",
"iconPath": "images/icon2.png",
"selectedIconPath": "images/icon2_on.png"
},
{
"pagePath": "pages/team/team",
"text": "加入团队",
"iconPath": "images/icon3.png",
"selectedIconPath": "images/icon3_on.png"
}
]
},
属性作用:
tabBar 指底部的 导航配置属性
color 未选择时 底部导航文字的颜色
selectedColor 选择时 底部导航文字的颜色
borderStyle 底部导航上边框的颜色
list 导航配置数组(最少2个、最多5个tab)
pagePath 页面访问地址
text 导航图标下方文字
iconPath 未选择时 图标路径
selectedIconPath 选中时 图标路径
2、tabBer配置注意事项
tabBer中pagePath页面跳转地址需要在app.json页面中pages数组中进行定义,否则会导致页面无法跳转。
页面跳转到tabber中配置的某一个页面时需要使用wx.switchTab进行跳转。
wx.switchTab({
url: 'page/index/index'
})
跳转到tabBer页面,并关闭其他所有非tabBer页