解决自定义tabBar选中时的状态变换：通过 getTabBar 接口获取组件实例

场景描述：

底部tabBar在切换时都会有对应被选中或未被选中的状态，我是在页面定义判断active与index的值是否相等，相等则显示被选中状态，反之显示未被选中状态。

第一个tab的index,active值为0；第二个tab的index,active值为1

---

bug描述：

点击第二个按钮时active的值一直为0，则index与active的值不相等，不会显示被选中时候的状态

---

解决方案：

在第二个tab对应页面js文件的onShow处写以下代码即可

    onShow() {
        const tabBar = this.getTabBar()
        tabBar.setData({
            active: 1
        })

最主要的是getTabBar接口为我们解决了问题。
那getTabBar接口是什么呢？
其实在官方文档已经有写到：
QQ小程序：QQ小程序自定义tabBar
微信小程序：微信小程序自定义tabBar

划重点!

1. 每个 tab 页下的自定义 tabBar 组件实例是不同的，可通过自定义组件下的 getTabBar 接口，获取当前页面的自定义 tabBar 组件实例。
2. 注意：如需实现 tab 选中态，要在当前页面下，通过 getTabBar 接口获取组件实例，并调用 setData 更新选中态。

代码：

/*index.qml*/
 <view class="tab-bar">
  <image qq:for="{{tabs}}" qq:key="index" class="tab-bar-item" data-index="{{index}}"  bindtap="switchTab"  src="{{active === index ? item.selectedIconPath : item.iconPath}}"></image>
</view>

//qq.js
Component({
    data: {
        active: 0,
        tabs: [{
            pagePath: "/pages/index/index",
            iconPath: "/images/tab_1.png",
            selectedIconPath: "/images/tab_1_selected.png"
        },{
            pagePath: "/pages/friend/friend",
            iconPath: "/images/tab_2.png",
            selectedIconPath: "/images/tab_2_selected.png"
        }]
    },
    methods: {
        switchTab(e){
            const index = +e.currentTarget.dataset.index
            const item = this.data.tabs[index]
            if(item){
                this.setData({
                    active: index
                })
                qq.switchTab({
                    url: item.pagePath
                })
            }
        }
    }

})

//index.qss
.tab-bar {
    position: absolute;
    z-index: -100;
    width: 360rpx;
    height: 92rpx;
    left: 180rpx;
    border-radius: 64rpx;
    background: #FFFFFF;
    bottom: 50rpx;
    margin: 0 auto;
    height: 96rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4rpx 16rpx rgba(0, 0, 0, 0.1), 0rpx 30rpx 166rpx rgba(0, 0, 0, 0.07), 0px 6.05678px 24.308px rgba(0, 0, 0, 0.0302586), 0px 3.854px 10.72px rgba(0, 0, 0, 0.0151263), 0px 2.0095px 4.20727px rgba(0, 0, 0, 0.00579);
  }
  .tab-bar-item{
    width: 172rpx;
    height: 76rpx;
  }

//friend.js
onShow() {
        this.loadFriend()
        const tabBar = this.getTabBar()
        tabBar.setData({
            active: 1
        })
    }

如果此篇博客能帮得到你，欢迎大家关注，点赞，评论，收藏，转发呀~

如有不足也请在评论区提出批评指正！多多指教！