[微信小程序]自定义Tabbar的使用以及闪回问题解决

问题描述:

在使用微信小程序自定义Tabbar的时候，使用wx.switchTab(url)方法进行跳转时，路径跳转成功，但是Tabbar图标出现闪回(切换到了正确图标的瞬间闪回到了上一个图标)

---

 

问题详情:

①初始状态如下

 ②点击分类按钮时，路径成功进行了跳转，而图标栏瞬间跳转到分类后闪烁返回到了首页图标，渲染失败

 

 

 ③多次测试均出现问题

---

相关源码:

wxml:

 <view class="cu-bar tabbar   bg-white">
    <view class="action text-{{selected == 0 ? 'green' : 'gray'}}" bindtap="switchTab" data-e="0">
      <view class="cuIcon-{{selected == 0 ? 'homefill' : 'home'}}"></view> 首页
    </view>
    <view class="action text-{{selected == 1 ? 'green' : 'gray'}}" bindtap="switchTab" data-e="1">
      <view class="cuIcon-{{selected == 1 ? 'circlefill' : 'circle'}}"></view> 分类
    </view>
    <view class="action text-gray add-action" bindtap="switchTab" data-e="4">
      <button class="cu-btn cuIcon-add bg-green shadow"></button>
      发布
    </view>
    <view class="action text-{{selected == 2 ? 'green' : 'gray'}}" bindtap="switchTab" data-e="2">
      <view class="cuIcon-{{selected == 2 ? 'cartfill' : 'cart'}}">
        <view class="cu-tag badge">99</view>
      </view>
      购物车
    </view>
    <view class="action text-{{selected == 3 ? 'green' : 'gray'}}" bindtap="switchTab" data-e="3">
      <view class="cuIcon-{{selected == 3 ? 'myfill' : 'my'}}">
        <view class="cu-tag badge"></view>
      </view>
      我的
    </view>
  </view>

js:

    switchTab: function(e){
      const key = Number(e.currentTarget.dataset.e); 
        var url = ['/pages/index/index','/pages/category/category','/pages/collect                 /collect','/pages/mine/mine']
        url = url[key] 
    
          wx.switchTab({          
            url: url      
            }) 
       
            this.setData({
              selected:key
            })
         
     
      

      
        },



data:{
selected:0
}

---

原因分析:

检查调试器Wxml中渲染已经执行，且渲染效果为上一次点击的Tab图标，我认为是因为Tabbar具有单独的数据域与页面Page的data数据域不共享，因此在渲染时，如果js中修改的数据是Page中的data数据域，而渲染需要的是Tabbar中的数据，因此只需要在每一个Tabbar对应的页面中Onshow方法里使用

   this.getTabBar().setData({

      selected:0

    })

解决代码:

  //每一个Tabbar的页面中都设置在页面显示的时候将Tabbar组件中的selected数据修改

onShow(){
    this.getTabBar().setData({
      selected:0
    })