解决⾃定义tabBar选中时的状态变换：通过getTabBar接⼝获取组件实例
场景描述：
底部tabBar在切换时都会有对应被选中或未被选中的状态，我是在页⾯定义判断active与index的值是否相等，相等则显⽰被选中状态，反之显⽰未被选中状态。
第⼀个tab的index,active值为0；第⼆个tab的index,active值为1
bug描述：
点击第⼆个按钮时active的值⼀直为0，则index与active的值不相等，不会显⽰被选中时候的状态
解决⽅案：
在第⼆个tab对应页⾯js⽂件的onShow处写以下代码即可
onShow(){
const tabBar =TabBar()
tabBar.setData({
active:1
})
最主要的是getTabBar接⼝为我们解决了问题。
那getTabBar接⼝是什么呢？
其实在官⽅⽂档已经有写到：
QQ⼩程序：
⼩程序：
划重点!
1. 每个 tab 页下的⾃定义 tabBar 组件实例是不同的，可通过⾃定义组件下的 getTabBar 接⼝，获取当前页⾯的⾃定义 tabBar 组件实
例。
2. 注意：如需实现 tab 选中态，要在当前页⾯下，通过 getTabBar 接⼝获取组件实例，并调⽤ setData 更新选中态。
代码：
/*index.qml*/
<view class="tab-bar">
<image for="{{tabs}}"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]
selectediconpath什么意思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 =TabBar()
tabBar.setData({
active:1
})
}
如果此篇博客能帮得到你，欢迎⼤家关注，点赞，评论，收藏，转发呀~如有不⾜也请在评论区提出批评指正！多多指教！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。