解决微信小程序自定义tabar点击两次图标才能选中状态

关于配置自定义tab-bar的方法可以参考微信官方文档

现有需求：小程序用户有三种身份（首页、订单、我的），根据不同用户身份显示不同的tabbar

实际效果如下图：

1、新建custom-tab-bar文件夹

index.js文件：

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#ff0000",
    allList: [{
      list1: [{
          "pagePath": "/pages/index/index",
          "iconPath": "/images/tabs/1-1.png",
          "selectedIconPath": "/images/tabs/1.png",
          "text": "首页"
        },
        {
          "pagePath": "/pages/mall/mall",
          "iconPath": "/images/tabs/4.png",
          "selectedIconPath": "/images/tabs/4-1.png",
          "text": "订单"
        },
        {
          "pagePath": "/pages/my/my",
          "iconPath": "/images/tabs/5.png",
          "selectedIconPath": "/images/tabs/5-1.png",
          "text": "我的"
        }
      ],
      list2: [
        {
          "pagePath": "/pages/mall/mall",
          "iconPath": "/images/tabs/4.png",
          "selectedIconPath": "/images/tabs/4-1.png",
          "text": "订单"
        },
        {
          "pagePath": "/pages/my/my",
          "iconPath": "/images/tabs/5.png",
          "selectedIconPath": "/images/tabs/5-1.png",
          "text": "我的"
        }
      ]
    }],
    list:[]
  },
  attached() {
    // 这里是通过获取登录成功后，是某个角色身份，根据登录角色不同，显示不同底部导航栏
    const roleId = const roleId = wx.getStorageSync('statu')
    if (roleId == 20) {
      this.setData({
        list: this.data.allList[0].list1
      })
    } else {
      this.setData({
        list: this.data.allList[0].list2
      })
    }
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      wx.switchTab({
        url: data.path
      })
      this.setData({
        selected: data.index
      })
    }
  }
})

说明：

首先，小程序tabbar只识别list里面的东西

先在data中定义一个list和allList数组,把三重身份用户的list分别定义为list1,list2,list3,放入allList

const roleId = wx.getStorageSync('statu') 获取用户信息存到缓存中，根据不同和的roleId来判断是什么身份，

this.setData({ list: this.data.allList[0].list2 }) 根据身份把allList里面的子数组赋值给系统默认识别的`list``

switchTab的作用根据不同的路径切换tabbar下标

index.wxml文件：

<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image class="cover-image" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view class="cover-view" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

index.wxss文件：

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item .cover-image {
  width: 44rpx;
  height: 44rpx;
}

.tab-bar-item .cover-view {
  margin-top: 8rpx;
  font-size: 24rpx;
}

2、使用方法：

在app.json里面加入custom:true

注意： 凡是用到tabbar的页面对应的xxx.js里onshow:function(){}都要按照以下进行设置，不然会出现tabbar显示与点击不同步的现象

代码块如下：

onShow() {
    if (this.getTabBar && 
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0 //这里的数字是对应底部导航栏的下标，从0-2，比如“首页”模块的这里写0，“订单”模块这里写1，“我的”模块写2
      })
    }
  },
      
//selected: 0就是选中的tabbar下标，根据不同页面显示不同tabbar下标

说明： 之所以写这篇文章，主要是为了解决点击图标两次才能被选中，为了解决这个问题，查了很多别人的文章，发现都是跟官方一样，写的很片面，实际亲测还是没用解决点击两次图片才被选中的问题，因为他们的判断跟我这个判断不同，亲测，按照我这样写就没事，不用点击2次才被选中，下面是他们的写法：

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0
      })
    }
  },

//selected: 0就是选中的tabbar下标，根据不同页面显示不同tabbar下标

最后希望能帮助到大家！记得点赞收藏哦谢谢！