uinapp小程序自定义底部tabbar闪动白屏去除

大家好，我小白，最近有朋友群里说这个小程序自定义底部tab初次点击会白屏问我能不能解决，实际上这个问题困扰大家好几年了，一直无所谓毕竟也没啥影响哈哈。。。网上检索方案无非就是两种。

①使用原生tabbar

②tabbar为主页，其他的页面作为组件存在（页面非常复杂，管理起来麻烦，性能差）

这都不是咱们的想要的结果。。。。

首先说下底部自定义tabbar为什么会闪屏晃动白屏？

因为自定义底部tabbar作为组件存在，每个页面初次点击都会重新加载渲染一遍组件，特别是有些比我还菜的小白，没做缓存优化，每个tabbar页面都还需从接口从新请求一遍tabbar数据，算上网络请求时间闪屏更严重了。

1️⃣那咱们解决的第一步就是，缓存优化。

uni.setStorageSync()和vuex都可以，只要首页加载过了，其他页面直接复用数据能极大程度减少闪屏晃动的时间，vuex基于内存效果更好，使vuex把自定义tabbar数据放在计算属性，基本上小程序和app几乎看不到闪屏了。h5有轻微闪动，不仔细听察觉不到。这样基本无感知了。。。

如果要实时更新最新图标样式，做好版本号管理即可。

那有没有办法彻底去除一丝丝轻微闪动？

有！有的老板！在后面细说！

2️⃣提升每个页面内tabbar组件渲染优先级

看着好像页面同时渲染的，实际上还是有细微差距的，尽管可能毫秒级别，咱们能提升一点是一点，template内元素或者组件同权重前提下，是从上至下渲染。

所以最好把tabbar组件放在模板内 顶部

全局变量定义前（最先执行）

全局变量定义后 初始值

export default 外部最后一行（早于生命周期）

data 执行（初始化数据）

onLoad 触发（页面加载，可修改数据）

onShow 触发（页面显示）

【computed】

计算属性首次求值（模板依赖的计算属性就绪，自定义tab组件的依赖数据也在此阶段完成求值）

↓ 【此时开始渲染流程】

↓ - 解析template模板（严格从上至下解析，自定义tab组件放在模板顶部会被优先解析）

↓ - 创建虚拟DOM（按模板解析顺序生成对应的虚拟节点树）

↓ - 挂载真实DOM到页面（虚拟DOM转化为真实DOM并插入页面文档流）

↓ - 视觉上能看到页面元素/内容（真实DOM渲染到视图层，用户可感知）

↓ 【渲染完成后】

mounted 触发（DOM已挂载完成，可操作DOM）

3️⃣自定义底部tab页面的路径要添加到原生底部tab内。

我们只是把原生的底部tab隐藏了而已，做了个自定义图标和样式底部tab，并且实现实时在线更新图标和样式罢了。实际上页面跳转也使用原生的页面跳转方式。

我发现有的应用，直接在普通非tabbar页面加个自定义定底部tab，每次点击都都触发从左往右的换页动画😂🤣😓这不瞎搞嘛。。。。

邪修大法，道友可以试试看。

①首先每个底部tab页内加载逻辑，让其初次进入不渲染页面内容，不执行接口逻辑，只渲染tab组件。vuex做好每个tab页是否为初次点击的状态标记。确保每个页面非初次进入，才执行接口请求和页面渲染。额外加一个简单判断而已，对性能无影响。（这步可选，适合追求完美的人体验更好，也可以省略）

②用户初次打开应用，App.vue中给他来个全屏加载动画，禁止他操作

③ 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' ]; // 邪修替客户快速点击所有底部tab页面 for (const path of tabPaths) { await new Promise(resolve => { uni.switchTab({ url: path, success: () => { setTimeout(resolve, 50); }, fail: (err) => { console.warn(`预加载${path}失败：`, err); resolve(); } }); }); } // 返回首页 await new Promise(resolve => { uni.switchTab({ url: '/pages/index/index', success: resolve, fail: resolve }); }); } catch (err) { console.error('tab预加载异常：', err); } finally { uni.hideLoading(); console.log('点完收工！'); //后续可选，使用vuex标记tab页是否初次加载 } },

至此邪功大成，已彻底去除自定义tab闪屏烦恼

追求完美的可以放在首页内触发，再自定义个更好看的加载动画。也就是最多耽误客户300ms时间提前帮客户点完所有页面，基本无感知的。