UniApp 小程序自定义底部 TabBar 闪烁白屏优化方案

问题背景

在使用 UniApp 开发小程序时，自定义底部 TabBar 初次点击往往会出现白屏或轻微闪烁。这通常是因为每个页面首次进入时重新加载了 TabBar 组件，且未做缓存优化，导致接口请求与渲染串行执行，增加了等待时间。

优化方案一：数据缓存

最直接的手段是缓存 TabBar 相关数据。使用 uni.setStorageSync 或 Vuex 存储首页加载后的状态。由于 Vuex 基于内存，性能更优，建议将自定义 TabBar 所需数据放入计算属性中。这样在后续页面切换时，可直接复用数据，极大缩短渲染耗时。H5 端可能会有极轻微抖动，但通常难以察觉。若需实时更新图标样式，配合版本号管理即可。

优化方案二：提升渲染优先级

虽然页面看似同时渲染，实则存在细微的时间差。Vue 模板解析遵循从上至下的顺序。因此，将自定义 TabBar 组件放置在模板的最顶部，能使其优先被解析和挂载。

生命周期执行顺序大致如下：全局变量定义 > data 初始化 > onLoad > onShow > computed 求值 > 模板解析 > DOM 挂载。确保 TabBar 依赖的数据在 computed 阶段就绪，并在模板顶层声明，可显著改善视觉上的卡顿感。

优化方案三：原生 TabBar 路径注册

即使隐藏了原生 TabBar，也务必将对应的页面路径添加到 pages.json 的原生 TabBar 配置中。如果直接在非 TabBar 页面添加自定义导航，每次点击可能触发默认的从左往右的页面切换动画，造成不必要的视觉干扰。保持原生跳转方式，仅替换样式，体验会更流畅。

进阶方案：全量预加载

追求极致体验的话，可以在 App.vue 中实现全量预加载。逻辑是在用户首次打开应用时，展示全屏加载动画并禁止操作，随后遍历所有 Tab 页面路径进行静默跳转。

async preloadAllTabs() {
  uni.showLoading({ title: '正在加载...', mask: true });
  try {
    const tabPaths = [
      '/pages/index/index',
      '/pages/goods_cate/goods_cate',
      '/pages/order_addcart/order_addcart',
      '/pages/user/index'
    ];
    
    for (const path of tabPaths) {
      await new Promise(resolve => {
        uni.switchTab({
          url: path,
          success: () => setTimeout(resolve, 50),
          fail:  { .(, err); (); }
        });
      });
    }
    
    
      ( {
      uni.({ : , : resolve, : resolve });
    });
  }  (err) {
    .(, err);
  }  {
    uni.();
  }
}