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%B9%89tabbar

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样式模板

  首页
  搜索
  关于

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
    })
}