Mpvue+vant实现自定义tabBar导航栏
公司有个项目要用小程序,准备用mpvue+vant实现。一开始使用vant-tabbar就遇到了问题。下边写一下实现的流程。1.首先上官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html?search-key=%E8%87%AA%E5%AE%9A%E4%...
公司有个项目要用小程序,准备用mpvue+vant实现。一开始使用vant-tabbar就遇到了问题。下边写一下实现的流程。
1.首先上官方文档
2.参照官方文档配置app.json
"tabBar": {
"custom": true,
"list": [
{
"pagePath": "pages/index/main",
"text": "首页"
},
{
"pagePath": "pages/search/main",
"text": "搜索"
},
{
"pagePath": "pages/about/main",
"text": "关于-"
}
]
},
"usingComponents": {}
注意custom字段和usingComponents选项的配置
3.直接在dist内创建custom-tab-bar文件夹和pages同级
4.在custom-tab-bar内创建index.json文件,配置好usingComponents路径
{
"component": true,
"usingComponents": {
"van-tabbar": "../../static/vant/tabbar/index",
"van-tabbar-item": "../../static/vant/tabbar-item/index"
}
}
5.在同目录内创建index.wxml文件,直接引用vant tabbar样式模板
<van-tabbar active="{{activeIndex}}" bindchange="handleProxy">
<van-tabbar-item icon="wap-home">首页</van-tabbar-item>
<van-tabbar-item icon="search">搜索</van-tabbar-item>
<van-tabbar-item icon="contact">关于</van-tabbar-item>
</van-tabbar>
6.在同目录内创建index.js,activeIndex保存激活的图标下标,list表示迁移的页面。handleProxy用来控制迁移。handleProxy中设置activeIndex来显示正确的激活图标。这里有个问题,到现在为止switch页面会导致tabbar实例发生变化从而导致activeindex无法正确表示,因此在各个自画面的show里需要对tabbar实例进行设置。
Component({
data: {
activeIndex: 0,
list: [
"/pages/index/main",
"/pages/search/main",
"/pages/about/main"
]
},
methods: {
handleProxy(e) {
const url = this.data.list[e.detail];
wx.switchTab({
url
});
this.setData({
activeIndex: e.detail
})
}
}
})
7.由于上一步的问题,参照官方示例,在各个tab页面的show里去设置activeIndex
onShow() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
activeIndex: 0
})
}
}
但是这里有个问题,mpvue无法通过调用这个 getTabBar 获取 tabBar 实例。 通过搜索mpvue的issue,发现了解决办法:
https://github.com/Meituan-Dianping/mpvue/issues/1449
最终版本是这样的
onShow () {
this.$root.$mp.page.getTabBar().setData({
activeIndex: 0 //对应页面的index
})
}
更多推荐
所有评论(0)