当前位置：首页 > article >正文

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

article 2024/11/14 5:51:47

前言

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

概要

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

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

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

思路

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

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

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

方案

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

// App.vue 文件

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

切换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.html
  theme(newVal) {
    plus.nativeUI.setUIStyle(newVal)
  }
},
// #endif