小程序自定义tabbar，学习记录

步骤一：在app.json中添加，如：

"tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/index/index"
      },
      {
        "pagePath": "pages/videoModal/videoModal"
      },
      {
        "pagePath": "pages/rank/rank"
      }
    ]
  }

步骤二：创建custom-tab-bar文件夹

写自定义的TabBar组件或者引入小程序UI组件，如在index.wxml中写入：

<van-tabbar active="{{ active }}" bind:change="onChange">
    <van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="video-o">视频</van-tabbar-item>
    <van-tabbar-item icon="friends-o">英雄榜</van-tabbar-item>
</van-tabbar>

步骤三：在custom-tab-bar的index.js中写入：

Component({
  data: {
    active: 0,
    list: [
      {
        "pagePath": "/pages/index/index"
      },
      {
        "pagePath": "/pages/videoModal/videoModal"
      },
      {
        "pagePath": "/pages/rank/rank"
      }
    ]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const url = this.data.list[this.data.active].pagePath
      wx.switchTab({url})
    },
    onChange(event) {
      // event.detail 的值为当前选中项的索引
      this.setData({ active: event.detail })
      this.switchTab()
    },
  }
})

此时点击TabBar可完成跳转，但是会发现TabBar的样式状态不太对，这需要到对应跳转的页面的onShow方法中添加

if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        active: 0  // 这个值对应当前页面索引值
      })
    }