- 根目录新建文件 custom-tab-bar
- 在custom-tab-bar右键新建Component,index文件
index.js文件data内容为
Component({
properties: {},
data: {
active: 0,
// 菜单列表
list: [{
"url": "/page/home/home", //地址
"icon": "wap-home-o", //图标
"info": '', //小红点
"text": "首页"
},
{
"url": "/page/me/me",
"icon": "user-o",
"info": '',
"text": "个人中心"
}
]
},
/**
*组件方法列表
**/
methods: {
onChange(e) {
// event.detail 的值为当前选中项的索引
this.setData({
active: e.detail
});
wx.switchTab({
url: this.data.list[e.detail].url
});
},
init() {
const page = getCurrentPages().pop();
this.setData({
active: this.data.list.findIndex(item => item.url === `/${page.route}`)
});
}
}
})
index.wxml中添加如下内容
<van-tabbar active="{{ active }}" bind:change="onChange">
<van-tabbar-item wx:for="{{list}}" info="{{item.info}}" wx:key="index" icon="{{item.icon}}" >{{item.text}}</van-tabbar-item>
</van-tabbar>
在app.json中加入
"tabBar": {
"custom": true,
"list": [
{
"pagePath": "page/home/home",
"text": "首页"
},
{
"pagePath": "page/me/me",
"text": "个人中心"
}
]
},
和以上tabBar和sitemapLocation同一级
在page下新建文件home和me目录,并分别新建Page,home和me文件。分别在home.js和me.js中的onShow函数下添加如下内容
this.getTabBar().init();
结束
遇到问题下方导航不显示
解决方式:小程序开发者工具右上角详情中的本地设置。调试基础库设置为最新版本。