微信小程序如何设置自定义tabBar

1、创建文件

        在文件根目录创建组件名字为：custom-tab-bar（指定名称）

2、配置app.json

        添加custom属性，让其自定义

"tabBar": {
  "custom": true,
  "list":[....]
}

        此时保存后 tabbar 区域中就是组件中的内容了

3、配置组件内容

        在这里我们使用vantweapp 来演示

        ①、在app.json中 引入全局组件

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

       ②、在index.wxml 中应用vant

<van-tabbar active="{{ active }}" bind:change="onChange">
 // 遍历内容
  <van-tabbar-item info="3" wx:for="{{list}}" wx:key="index" >
    <image
      slot="icon"
      src="{{ item.iconPath }}"
      mode="aspectFit"
      style="width: 30px; height: 25px;"
    />
    <image
      slot="icon-active"
      src="{{ item.selectedIconPath }}"
      mode="aspectFit"
      style="width: 30px; height: 25px;"
    />
    {{item.text}}
  </van-tabbar-item>
</van-tabbar>

        ③、index.js 部分逻辑

Component({
  data: {
    active: 0,
    list: [{.....}],

  methods: {
    onChange(event) {
      this.setData({
        active: event.detail
      });
      // 切换页
      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
    },
  }
)}

注意：此时已经可以正常切换页面了，但是会出现问题，点击更换pages后，高亮存在问题。

分析：每次切换pages 会导致重新创建一个tabbar组件，他用来控制的active 不受切换前的修改逻辑影响，既：修改的为切换前的tabbar组件的tabbar

4、解决高亮BUG

        方法一：切换时加载后更新active

        每次在页面显示的时候，通过getTabbar() 方法获取实例修改

  onShow: function () {
    this.getTabBar().setData({
      // 根据list 的索引
      active: 1
    })
  },

        方法二：使用数据共享

        ①、在组件的js 文件中配置共享

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import {store} from '../store/store'
Component({
  behaviors:[storeBindingsBehavior],
  storeBindings:{
    store,
    fields:['active'],
    actions:['updateActive']
  },
  methods: {
    onChange(event) {
      // this.setData({
      //   active: event.detail
      // });
      // 触发修改共享数据的方法，并将当前的index 传递进去
      this.updateActive(event.detail)
      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
    },
  }
})

        ②、在store中 设置active 保存选中的页面

export const store = observable({
  active:0,
  // ....
  
  // 更新当前点击的索引标识符
  updateActive:action(function(val){
    this.active = val
  })
})

此时就可以正常显示了，但是有闪烁的情况发生