1.在app.json中增加关于底部导航栏的设置
"tabBar": {
"custom": true,//这个要有,设置启用自定义tabbar
"color": "#a9b7b7",
"selectedColor": "#11cd6e",
"borderStyle": "white",
"list": [
{
"selectedIconPath": "image/index-select.png",
"iconPath": "image/index.png",
"pagePath": "pages/index/index",
"text": "首页"
},
{
"selectedIconPath": "image/info-select.png",
"iconPath": "image/info.png",
"pagePath": "pages/info/info",
"text": "信息"
}
]
}
2.常见component:custom-tab-bar(名字不能修改)
3.再对自定义导航栏进行一些交互设置
const app = getApp();
Component({
data: {
selected: 0, //当前选择的第几项,和自己写的样式有关系
color: "#7A7E83",
selectedColor: "#3cc51f",
list: [] //tabBar的数据
},
lifetimes: {
attached() { //设置tabbar内容,可在别的页面中对list进行赋值达到动态效果
this.setData({
list: app.globalData.list
})
},
},
methods: {
switchTab(e) { //对点击tabbar进行跳转
const data = e.currentTarget.dataset;
const url = data.path;
wx.switchTab({ url });
}
}
})
4.在tabbar界面增加交互
if (typeof this.getTabBar === 'function' &&this.getTabBar()){
this.getTabBar().setData({
selected: 0 //与之前js中的一个意义
})
}
将上述代码放在onshow中,到这边为止动态tabbar基本完成
5.因为tabbar的特性,切换tabbar使不会重新加载页面,所以需要将上一布中的代码加在onshow中,而不是onload中,一些需要每个页面显示后重现运行的函数也放在onshow中