Vant Weapp 2x原生小程序tabbar组件全局通用已测试

试过了网上很多版本，但是太多的问题,按下面操作避免踩坑。

1，创建文件夹custom-tab-bar包含index.wxml,index,json,index.wxss,index,js

// custom-tab-bar/index.js
Component({

  /**
   * 组件的初始数据
   */
  data: {
    active: 0,
    list: [{
      icon: 'home-o',
      text: '首页',
      url: '/pages/index/index'
    },
    {
      icon: 'chat-o',
      text: '日志',
      url: '/pages/logs/logs'
    }
    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {

    onChange(event) {
      this.setData({
        active: event.detail
      });
      wx.switchTab({
        url: this.data.list[event.detail].url
      });
    },

    init() {
      const page = getCurrentPages().pop();
      this.setData({
        active: this.data.list.findIndex(item => item.url === `/${page.route}`)
      });
    }
  }
})

2,custom-tab-bar内的index.wxml

<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item wx:for="{{ list }}" wx:key="index" icon="{{ item.icon }}">
    {{ item.text }}
  </van-tabbar-item>
</van-tabbar>

3,index.json添加

{
  "component": true,
  "usingComponents": {
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
  }
}

4,app.json添加

{
  "component": true,
  "usingComponents": {
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
  }
}

5,导航页面js内每页添加

/**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.getTabBar().init();
  },

6，结束，按需修改即可