解決微信小程序 自定義tabBar 切換時候閃爍問題


這個閃爍真的很迷

我搜了一些資料,進行了以下步驟的操作

第一種解決辦法 ,把tabbar自定義組件的this.setData中的代碼注釋掉

在這里插入圖片描述

顯示tabbar中的頁面中,添加下面的:這個好像沒什么用啊

在這里插入圖片描述

第二種方法:把cover-view標簽,全部替換成view標簽,cover-image也換成icon

在這里插入圖片描述

我直接上代碼,上面是原本的代碼,下面是新代碼

custom-tab-bar/index.wxml

<!--miniprogram/custom-tab-bar/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 src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view> -->
<!--miniprogram/custom-tab-bar/index.wxml-->
<view class="tab-bar">
  <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <view class="iconfont {{item.icon}}" style="{{selected === index ? 'color: #2a5ceb' : '#ccc'}}">
      <van-icon name="{{item.icon}}" style="font-size:24px;color: {{selected === index ? '#2a5ceb': '#444444'}};" />
    </view>
    <view class="text" style="font-weight:600;font-size:12px;color: {{selected === index ? '#2a5ceb': '#444444'}};">{{item.text}}</view>
  </view>
</view>

###

在這里插入圖片描述

真的不閃爍了哎!!!!接下來就自己調樣式啦~~

最終建議,大家不要用這個了,搞個單頁面應用好了,這個真的不好用

在這里插入圖片描述


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM