在Uni-App中根除页面闪白，你的闪屏方案在这里！

2024-01-19 11:39:13

深入剖析Uni-App闪屏的根源

在探讨Uni-App闪屏的解决之道前，我们必须先了解导致闪屏的根源。简而言之，Uni-App在页面切换时，系统会先加载APP.vue中的全局样式，再加载新页面的样式。如果新页面与全局样式有差异，就会出现短暂的闪白。

绝招一：巧用loading组件，轻松化解闪屏

解决Uni-App闪屏问题，第一步就是要消除闪屏的根源。然而，直接修改APP.vue中的全局样式可能会对整个应用造成影响，得不偿失。这时，我们可以借助loading组件来巧妙化解闪屏。

在需要加载新页面的页面中，我们可以添加一个loading组件。当新页面加载完成时，再隐藏loading组件。这样，当用户切换页面时，就不会看到闪白了。

loading组件的具体实现方式如下：

<template>
  <div class="loading">
    <div class="loading-icon"></div>
    <div class="loading-text">正在加载...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true
    }
  },
  methods: {
    hideLoading() {
      this.isLoading = false
    }
  }
}
</script>

<style>
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 9999;
}

.loading-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border: 5px solid #000000;
  border-radius: 50%;
  animation: loading 1s linear infinite;
}

.loading-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #000000;
}

@keyframes loading {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style>

然后，在需要加载新页面的页面中，使用如下代码加载loading组件：

<template>
  <div>
    <loading v-if="isLoading"></loading>
    <router-view></router-view>
  </div>
</template>

<script>
import Loading from '@/components/Loading.vue'

export default {
  data() {
    return {
      isLoading: true
    }
  },
  components: {
    Loading
  },
  created() {
    setTimeout(() => {
      this.isLoading = false
    }, 1000)
  }
}
</script>

绝招二：合理设置页面背景色，一劳永逸告别闪屏

在某些情况下，我们可以通过合理设置页面背景色来一劳永逸地告别闪屏。

如果您的APP是深色背景，那么可以在APP.vue中的全局样式中将背景色设置为深色。这样，当切换页面时，就不会出现闪白了。

/* APP.vue */
body {
  background-color: #000000;
}

如果您的APP是浅色背景，那么可以在page.json文件中将背景色设置为浅色。

/* page.json */
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "background": "#ffffff"
      }
    }
  ]
}

绝招三：合理利用page.json的style字段，巧妙解决闪屏

在某些情况下，我们可以通过合理利用page.json的style字段来巧妙解决闪屏。

/* page.json */
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "backgroundColor": "#ffffff",
        "transition": "background-color 0.3s ease-in-out"
      }
    }
  ]
}

在page.json文件中，我们可以为每个页面设置style字段。style字段是一个JSON对象，可以设置页面的样式。

在style字段中，我们可以设置backgroundColor属性来设置页面的背景色。

此外，我们还可以设置transition属性来设置页面的过渡动画。在transition属性中，我们可以设置background-color属性来设置页面的背景色过渡动画。

通过合理利用page.json的style字段，我们可以巧妙解决闪屏问题。