【微信小程序】自定义tabbar(custom-tab-bar)点击切换闪烁的解决方法


最近有需求开发微信小程序的需求,在处理到自定义tabbar模块的时候来回点击切换发现tabbar有闪烁的情况。
既然看到了... 那在“前端强迫症”的作祟下... 就开始了较真的优化踩坑之旅。
查阅搜索了大量资料,再一一实验下并没有解决自己的问题。这里的过程就不记录了。
最后是在重新阅读了官方的文档,以及download了给出的demo仔细对比后发现了解决办法。
首先查到的解决方法是

  1. selected属性设置为null
  2. switchTab里赋值的setData方法注释掉
    验证后无效

后怀疑是cover-view组件的问题,反复验证发现并不是。不过这里发现了cover-view不支持单边border、shadow,等属性只支持简单的排版布局。以及真机调试会强制溢出隐藏,也就是如果有凸出的半圆按钮这种UI使用cover-view实现会出现问题。

最后的解决方法是

Component({

data: {

selected: 0,
color: "#7A7E83",
selectedColor: "#3D7EFF",

selected 设置0

  methods: {
switchTabs(e) {
  const data = e.currentTarget.dataset
  const url = data.path
  wx.switchTab({ url })
  this.setData({
    selected: data.index
  })
},

添加this.setData设置下标
最后关键的一步对比app.json里tabbar下list配置的icon路径、文案、及URL与custom-tab-bar下的是否一致。
官方的描述

在自定义 tabBar 模式下
在 app.json 中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。
为了保证低版本兼容以及区分哪些页面是 tab 页,tabBar 的相关配置项需完整声明,但这些字段不会作用于自定义 tabBar 的> 渲染。
所以判断如果配置不相同可能会出现错误加载的问题从而导致闪屏的出现

声明:麋鹿与鲸鱼|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 【微信小程序】自定义tabbar(custom-tab-bar)点击切换闪烁的解决方法


Carpe Diem and Do what I like