此方法仅针对App端 (IOS 未测试)。
问题产生
从亮色页面切换到深色页面,切换过程中会先出来白底(闪一下),然后才会出现页面内容。
一般首次打开深色页面时候不会出现,二次进入深色页面才会出现以上情况。
解决办法与猜测
方法
- 在app.vue中设置 page{ minheight:100% }
- 在深色页面中设置页面背景颜色,style中不能带scope:
<style>page {background-color: #051922;}</style>
- 在深色页面中添加以下处理
<template>
<view class="page-fade-in" :style="{opacity: pageOpc}">
<!-- 开始先把内容隐藏掉,页面 ready 后再渲染 -->
<template v-if="pageOpc">
<!-- 页面内容 -->
</template>
</view>
</template>
<script setup>
import { onReady } from '@dcloudio/uni-app';
import { ref } from "vue"
const pageOpc = ref(0)
onReady(() => {
setTimeout(() => {
pageOpc.value = 1;
// 这个 100 根据页面动画时间来定(页面动画效果默认300,我修改成了100,所以这里延时100处理)
// 页面动画时间可以在 page.json 里面修改 animationDuration
}, 100)
})
</script>
<style>
page {background-color: #051922;}
/* 加个动画掩饰加载过程 */
.page-fade-in{
opacity: 0;
transition: all 0.3s;
}
</style>
解释
观察到这个闪白的时间跟页面的复杂程度有一定的影响:跳转到一个非常简单甚至空白的深色页面这个闪白的过程甚至没有,而对于那些越复杂的这个过程就越长,由此猜测是因为渲染的阻塞导致闪白。
经过简单的测试的确可以从这方面入手去思考:
-
page
设置高度100%
确保页面背景完整覆盖。 - 将页面元素的渲染放到页面 ready 之后去做,这样虽然牺牲了一定的时间,但是可以大大提升用户体验
- 在
onReady
中再加一个 100 (页面切换动画时间)的延时,是因为观察到:如果不加的情况下动画过程会出现卡顿,并且偶尔会出现闪白的现象。 - 配合透明过渡,减少用户视觉上的僵硬感,也算是一种提升体验感的优化
还有一种方法
用 uni.reLaunch
跳转不会闪白,不过操作起来比较麻烦,而且没有页面切换的动画。
一些无用的话
- 网上很多文章说可以在
page.json
中设置背景色解决:
"app-plus":{
"background": "#262626"
}
- 还有一些简单的在页面上设置
page
背景色的处理方法 都没啥作用。