小程序
小游戏
企业微信
微信支付
扫描小程序码分享
使用官方的自定义tabbar demo,两个tabbar测试无异常,新增多两个tabbar切换时就会出现明显的图标闪烁
14 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
笑死,现在是2021/11/30,官方给的自定义Tabber例子还是没改,这个问题还在,没想到一个自定义tabber要在每个tab页的onShow里去设置tabber实例里的数据,官方给的例子依然是tabber里设置一下,然后每个页面设置一下。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
let selected = 0; Component({ data: { list: [ ... ], }, attached() { this.setData({ selected, }); }, methods: { switchTab(e) { const data = e.currentTarget.dataset; const url = data.path; wx.switchTab({ url, fail(e) { console.log(e); }, }); selected = data.index; }, }, });
官方给的也闪,只不过他们用的图片和背景色看的不明显罢了~
2023年4月6日了呢
👻👻👻👻👻👻👻👻👻👻 这坑爹,bug多的很
楼主解决没有
除了注释掉 this.setData({ selected: data.index }),最重要的一点,不要用cover-view跟cover-image,用普通标签就可以了。完美解决闪动问题。
亲测不闪
Component({ data: { selected: -1, // 这里不让默认选中 color: "#7A7E83", selectedColor: "#3cc51f", list: [{ pagePath: "/index/index", iconPath: "/image/icon_component.png", selectedIconPath: "/image/icon_component_HL.png", text: "组件" }, { pagePath: "/index/index2", iconPath: "/image/icon_API.png", selectedIconPath: "/image/icon_API_HL.png", text: "接口" }] }, attached() { }, methods: { switchTab(e) { const data = e.currentTarget.dataset const url = data.path wx.switchTab({url}) // 这里注释掉 // this.setData({ // selected: data.index // }) } } })
这行代码注释掉就好了
正在加载...
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
笑死,现在是2021/11/30,官方给的自定义Tabber例子还是没改,这个问题还在,没想到一个自定义tabber要在每个tab页的onShow里去设置tabber实例里的数据,官方给的例子依然是tabber里设置一下,然后每个页面设置一下。
let selected = 0; Component({ data: { list: [ ... ], }, attached() { this.setData({ selected, }); }, methods: { switchTab(e) { const data = e.currentTarget.dataset; const url = data.path; wx.switchTab({ url, fail(e) { console.log(e); }, }); selected = data.index; }, }, });
官方给的也闪,只不过他们用的图片和背景色看的不明显罢了~
2023年4月6日了呢
楼主解决没有
除了注释掉 this.setData({ selected: data.index }),最重要的一点,不要用cover-view跟cover-image,用普通标签就可以了。完美解决闪动问题。
亲测不闪
Component({ data: { selected: -1, // 这里不让默认选中 color: "#7A7E83", selectedColor: "#3cc51f", list: [{ pagePath: "/index/index", iconPath: "/image/icon_component.png", selectedIconPath: "/image/icon_component_HL.png", text: "组件" }, { pagePath: "/index/index2", iconPath: "/image/icon_API.png", selectedIconPath: "/image/icon_API_HL.png", text: "接口" }] }, attached() { }, methods: { switchTab(e) { const data = e.currentTarget.dataset const url = data.path wx.switchTab({url}) // 这里注释掉 // this.setData({ // selected: data.index // }) } } })
这行代码注释掉就好了
根据文档在app.js下配置tabbar即可.