小程序
小游戏
企业微信
微信支付
84 个评论
加粗
标红
插入代码
插入链接
插入图片
上传视频
现在都2022年了，这么多用户反馈了2年多的问题还解决不了吗，我不相信以腾讯的实力解决不了这个问题，如果个别开发人员解决不了这个问题，腾讯这么多技术大佬能帮忙解决下吗。
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
可以将原来放置 image 标签的位置，替换为两个 image 标签，一个存放选中图片路径，一个存放未选中图片路径，然后通过 selected 状态来控制是否展示元素（将不需要展示的元素设置为 visibility: hidden;）。
此时页面会同时渲染所有的 icon 图片，即使不需要展示，也会渲染，因此会有一个透明的占位，此时可以使用 position: absolute 布局来使其重叠展示（根据具体业务逻辑灵活调整）
使用上述方法，可以解决“首次切换闪烁”的问题，不过存在两点不足：
1. 图片路径必须使用网络地址（不清楚为啥）；
2. 如果 icon 下需要展示文字描述，会错位，可以考虑将文本和 icon 合并为一个新的 icon 来解决；
下面是使用官方 demo 首次加载后切换的效果：
下面是优化以后的效果：
下面是主要实现代码：
<view class="tab-bar"> <view class="tab-bar-border"></view> <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"> <image class="img" src="{{item.selectedIconPath}}" style="{{selected === index？''：'可见性： 隐藏;'}}"></image> <image class="img" src="{{item.iconPath}}" style="{{selected === index？'visibility： hidden;'：''}}"></image> </view> </view>
真NB啊腾讯，状态直接中止了，自家腾讯云小程序都有这个问题，打死不修呗
超过两个tabbar页不要单纯的使用官方说的show时getTabBar().setData设置选中态，自定义tabbar是多个实例的，那样只会改变当前tabbar实例的选中态，其他页面的tabbar实例并没有改变选中态，这样会导致你说的那些问题。
正确做法：
在每个tabbar lifetimes attached时找个地方（比如globalData）存进去，然后在每个tabbar页面show时遍历存的tabbar实例setData 选中态， 因为官方demo只有两个tabbar页，于是只获取当前页的tabbar实例setData不会有问题，官方这个不回复态度就是只管拉屎不管搽屁股。
今天是2023年3月15日（国际消费者权益日），第一次切换依旧还在闪烁。
2023年了这个问题还没解决吗？体验太差了
2023宇宙闪烁无解
家人们 我知道了
切换的时候设置globalData
在自定义tabbar的生命周期里setData
今天是2026年8月10日，微信小程序快倒闭了，偶然间被指派维护公司这个老项目，该问题依然没有得到解决
custom-tab-bar/index.js文件
第一步：将data中定义得 selected赋值为null
第二步：将methods中得switchTab函数中之前得selected赋值操作删除 （注：selected赋值在其他tarbar的页面得onShow方法中已赋值过了）
正在加载...
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
现在都2022年了，这么多用户反馈了2年多的问题还解决不了吗，我不相信以腾讯的实力解决不了这个问题，如果个别开发人员解决不了这个问题，腾讯这么多技术大佬能帮忙解决下吗。
可以将原来放置 image 标签的位置，替换为两个 image 标签，一个存放选中图片路径，一个存放未选中图片路径，然后通过 selected 状态来控制是否展示元素（将不需要展示的元素设置为 visibility: hidden;）。
此时页面会同时渲染所有的 icon 图片，即使不需要展示，也会渲染，因此会有一个透明的占位，此时可以使用 position: absolute 布局来使其重叠展示（根据具体业务逻辑灵活调整）
使用上述方法，可以解决“首次切换闪烁”的问题，不过存在两点不足：
1. 图片路径必须使用网络地址（不清楚为啥）；
2. 如果 icon 下需要展示文字描述，会错位，可以考虑将文本和 icon 合并为一个新的 icon 来解决；
下面是使用官方 demo 首次加载后切换的效果：
下面是优化以后的效果：
下面是主要实现代码：
<view class="tab-bar"> <view class="tab-bar-border"></view> <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"> <image class="img" src="{{item.selectedIconPath}}" style="{{selected === index？''：'可见性： 隐藏;'}}"></image> <image class="img" src="{{item.iconPath}}" style="{{selected === index？'visibility： hidden;'：''}}"></image> </view> </view>真NB啊腾讯，状态直接中止了，自家腾讯云小程序都有这个问题，打死不修呗
超过两个tabbar页不要单纯的使用官方说的show时getTabBar().setData设置选中态，自定义tabbar是多个实例的，那样只会改变当前tabbar实例的选中态，其他页面的tabbar实例并没有改变选中态，这样会导致你说的那些问题。
正确做法：
在每个tabbar lifetimes attached时找个地方（比如globalData）存进去，然后在每个tabbar页面show时遍历存的tabbar实例setData 选中态， 因为官方demo只有两个tabbar页，于是只获取当前页的tabbar实例setData不会有问题，官方这个不回复态度就是只管拉屎不管搽屁股。
今天是2023年3月15日（国际消费者权益日），第一次切换依旧还在闪烁。
2023年了这个问题还没解决吗？体验太差了
2023宇宙闪烁无解
家人们 我知道了
切换的时候设置globalData
在自定义tabbar的生命周期里setData
今天是2026年8月10日，微信小程序快倒闭了，偶然间被指派维护公司这个老项目，该问题依然没有得到解决
custom-tab-bar/index.js文件
第一步：将data中定义得 selected赋值为null
第二步：将methods中得switchTab函数中之前得selected赋值操作删除 （注：selected赋值在其他tarbar的页面得onShow方法中已赋值过了）