vant 小程序自定义tabbar

// 原来还觉得vant不行，不过这个tabbar还挺香

1、引入 app.json

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

2、更改tabbar配置 app.json

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

3、写tabbar插件 tabbar-user

js

// components/tabbar-user/tabbar-user.js
Component({
  properties: {
    active:Number
  },

  methods: {
    onChange(event) {
      // event.detail 的值为当前选中项的索引
      let url = ''
      switch (event.detail) {
        case 0:
          url = '/pages/index/index'
          break;
        case 1:
          url = '/pages/dispatch/index/index'
          break;
        default:
          break;
      }
      wx.switchTab({
        url: url,
      })
    },
  }
})

wxml

<van-tabbar active="{{ active }}" bind:change="onChange" active-color="#0080ff" inactive-color="#999999">
  <van-tabbar-item>
    <image slot="icon" src="/assets/images/icon/sy.png" mode="aspectFit" style="width: 30px; height: 18px;" />
    <image slot="icon-active" src="/assets/images/icon/sy.png" mode="aspectFit" style="width: 30px; height: 18px;" />首页
  </van-tabbar-item>
  <van-tabbar-item>
    <image slot="icon" src="/assets/images/icon/pg.png" mode="aspectFit" style="width: 30px; height: 18px;" />
    <image slot="icon-active" src="/assets/images/icon/pg.png" mode="aspectFit" style="width: 30px; height: 18px;" />派工
  </van-tabbar-item>
</van-tabbar>

4、app.json 引入组件

  "usingComponents": {
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index",
    "tabbar-user": "components/tabbar-user/tabbar-user"
  },

5、页面使用 /pages/index/index

<tabbar-user active="0"></tabbar-user>

 6、小程序编译的时候应该会提示warning信息，可以再根目录下新建一个空组件，或者不用管也没啥影响

空组件名为 custom-tab-bar，注意要把wxml中的信息全部删掉或注释掉，否则会有影响