都2024了，还在为uniapp的app端tabbar页面闪烁闪白而发愁吗

前言

本文记于2024-8-30，本人在网上寻找uniapp的app端tabbar页面闪烁闪白相关文章时，可谓是搜遍看遍试遍，当然也是完全徒劳，不能说网上现存的文章完全无用吧，那也是你copy我我copy你，一点意思没有。在不断思考之后，突然灵机一动，于是乎便有了该文章。

概要

本文主要为uniapp的app端tabbar页面在切换另一个未缓存的tabbar页面时会发生闪白闪烁。这个根本原因是app端可以理解为多页面，你不去点击下一个tabbar页面，是不会去渲染的。但是渲染又要时间，就会存留这一瞬间的渲染间隙。

有人问：不是有预加载吗，把tabbar页面全都预加载一遍不就行了吗；
或者说tabbar页面不是有缓存吗，我直接开局先把所有tabbar页面加载一遍不就欧了。

但是我相信看到这篇文章的小伙伴们也正是因为此番操作无果，或者各种报错，不能连续跳转页面啊，又或是全部加载一遍的话启动太慢了等等，才来尝试本文章提供的思路的。

思路

给根节点（也就是html节点）上底色。
一句话，很简单，但是也很难。如果是纯暗色系app，那你直接写死一个合适的暗色底色就行了。
不过如果你的app是可以黑白切换的，如果你写死黑色底色，那么白主题就是闪黑了。

有人问：那我想办法给html动态设置底色不就行了。

想法很好，但是你自己慢慢试错得踩遍坑，因为你给底色设成css或者sass变量也好，还是什么其他的也罢，你会发现永远都会慢一步，慢这渲染html根节点的一步，导致还是闪烁。这里我就直接上方案了

方案

1. 通过媒体查询，给暗夜模式上底色

// App.vue 文件<style>
// 这里只用写暗黑模式，因为默认就是白底
// 这里的dark就是主题色变量，只支持light，dark，auto（auto我们忽视掉）
@media (prefers-color-scheme: dark) {html {background: #141414; // 适合你的暗夜模式的底色}
}
</style>

2. 切换dark还是light
   跟随你的主题变量设置 prefers-color-scheme

// 这里需要监听的theme变量应该不用我多说，大家在做主题切换时肯定会有个代表当前处于什么主题的标志变量，
// 我是将这个变量存在pinia并且持久化的，所以此处我通过监听该变量即可
computed: {theme() {return useSysStore().getTheme()}
},// 可以用条件编译来指定下列代码仅在app端执行
// #ifdef APP-PLUS
watch: {// 这里我对我定义的主题标志进行监听// 调用 html5+的api，可以给prefers-color-scheme设置模式// 详见：https://www.html5plus.org/doc/zh_cn/nativeui.htmltheme(newVal) {plus.nativeUI.setUIStyle(newVal)}
},
// #endif

该思路我只在我自己的安卓机子上实测了也成功了，我不能保证所有机型都适配，而且我木有苹果手机，自然也测不了ios设备

题外话

既然都做完自定义的主题切换了，怎么在根节点添加类或者自定义属性用作主题标识（使用renderjs或者wxs）的方法应该不用在此文章讲解说明了。该文章也仅提供如此一思路去实现使用媒体查询的形式动态给根节点上底色而已。

全网我搜罗很久都没见到有这种思路的分享，如若转载请注明我原文章原作者

希望本文能帮你节省很多时间，网上的文章抄来抄去的太多了。如果本文没能帮到你也请直接略过

效果预览

实现前：

实现后：