收藏
回答

使用微信官方自定义 tabBar 冷启动后首次切换 tab 底部导航短暂整条消失的问题

框架类型 问题类型 终端类型 AppID 环境ID 基础库版本
小程序 Bug 工具 wxe42367c18379e743 cloudbase-5gajux1l1037edef 3.11.2

我在小程序中使用微信官方自定义 tabBar(tabBar.custom = true,路径为 /custom-tab-bar/index)。在多款真机环境下(如安卓荣耀、微信最新版),都存在同样现象:小程序冷启动进入首页后,用户第一次从首页切到“我的”等 tab 时,底部自定义 tabBar 会短暂整条消失一下再出现,此后在同一进程内多次切换 tab 都正常,不再复现。

目前已按官方文档和社区建议做了如下优化,但问题仍存在:

1)在 lifetimes.attached 中根据当前 route 初始化 selected,并尝试过仅在各页面 onShow 中通过 getTabBar().setData({ selected }) 控制高亮,同时在 custom-tab-bar/index.js 中彻底移除所有对 selected 的 setData,保证状态只由页面 onShow 驱动。

2)在 onSwitchTab 中尝试过多种写法:

a. 直接 wx.switchTab({ url });

b. 先 this.setData({ selected: index }) 再用 wx.nextTick(() => wx.switchTab({ url }));

c. 按官方建议使用 setTimeout 延迟 50ms 再 wx.switchTab。

3)tabBar 根节点样式已固定:position: fixed; bottom: 0; height: 110rpx; background-color 固定为浅灰,z-index 设为较高值,页面中也未使用 wx.hideTabBar,未叠加 map、video 等原生组件和高 z-index 遮罩层。

4)图标资源为本地文件,已采用双 image + hidden 的预加载方式,且在 app.js 的 onLaunch 中通过 wx.getImageInfo 预加载 tabBar 所需图标,减少首次渲染抖动。

5)已尝试精简 custom-tab-bar 组件初始化逻辑,避免在创建阶段做大量计算,只保留必要的数据和方法。

在上述所有优化组合下,问题表现依旧一致:仅在冷启动后第一次切换 tab 时,底部自定义 tabBar 会短暂整条消失,再重新出现且选中态正确;之后再次切换则完全正常。想请官方帮忙确认:

1)这是否为当前微信自定义 tabBar 在冷启动场景下的已知渲染问题或限制?

2)是否有推荐的官方写法或内部配置,能在继续使用官方自定义 tabBar 的前提下,彻底避免这次首次切换时的底栏“短暂消失”现象?

回答关注问题邀请回答
收藏

1 个回答

  • showms
    showms
    11-26

    自定义tabbar切换过程是会有闪烁问题。已经存在很多年了

    11-26
    有用
    回复
登录 后发表内容
问题标签