自定义tabbar-使用vant weappd

1、app.json里面定义原始的tabbar,并加上"custom": true,

  "tabBar":{
    "custom": true,
    "list":[
      {
        "text":"首页",
        "pagePath":"pages/index/index"
      },
      {
        "text":"日志",
        "pagePath":"pages/logs/logs"
      }
    ]
  },

2、根目录新建custom-tab-bar文件夹，里面创建组件index等文件（名称不能改）

image.png

3、custom-tab-bar/index.json
加上usingComponents引用vant组件

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

4、custom-tab-bar/index.js写上组件

// custom-tab-bar/index.js
Component({
  data: {
    active:0,
    list:[{
      text:"首页",
      icon:"home-o",
      url:"/pages/index/index"
    },
    {
      text:"日志",
      icon:"search",
      url:"/pages/logs/logs"
    },
  ]
  },
  methods: {
    onChange:function(e){
      var i = e.detail;
      wx.switchTab({
        url: this.data.list[i].url,
      })
      this.setData({
        active : i
      })
    }
  }
})

5、custom-tab-bar/index.wxml写上自定义tabbar组件

<!--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>

6、目标页面不能用Page，必须全部改为组件模式Component
比如pages/log/logs.js
重点：active: 1 要对应选择的tabbarItem序号

Component({
  pageLifetimes: {
    show() {
      this.getTabBar().setData({
        active: 1
      });
    }
  },
  data: {
    logs: []
  },
})

完成

image.png