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

#概要

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

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

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

#思路

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

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

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

#方案

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

复制<style>


@media (prefers-color-scheme: dark) {
  html {
    background: #141414; 
  }
}
</style>

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

复制computed: {
  theme() {
    return useSysStore().getTheme()
  }
},



watch: {
  
  
  
  theme(newVal) {
    plus.nativeUI.setUIStyle(newVal)
  }
},

本方案是无需在manifest.json中设置darkmode的，也不需要写个theme.json去使用darkmode的写法，就正常使用css或者scss变量去处理主题配色。

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

#题外话

既然都做完自定义的主题切换了，怎么在根节点添加类或者自定义属性用作主题标识（使用renderjs或者wxs）的方法应该不用在此文章讲解说明了。该文章也仅提供如此一思路去实现使用媒体查询的形式动态给根节点上底色而已。全网我搜罗很久都没见到有这种思路的分享，如若转载请注明我原文章原作者。 希望本文能帮你节省很多时间，网上的文章抄来抄去的太多了。如果本文没能帮到你也请直接略过

#效果预览

移步至原文档。