uniapp 优化首屏白屏

mixin 混入

优化：

vue有关$nextClick的理解：

1、就是在vue生命周期creat()创建初始，一定要把对dom的操作放在Vue.nextTick()中 因为vue在creat阶段并没有任何对页面的渲染，这时候进行的操作没有任何作用，所以需要Vue.nextTick()方法等待vue的dom渲染完成之后渲染

loading.js

export default {
	data(){
		return {
			beforeReady:true,
		}
	},
	onReady() {
		this.$nextTick(()=>{
			setTimeout(()=>{
				this.beforeReady = false
			},1000)
		})
	},
}

loading-plus.vue

<template>
	<view class="aboutme" style="z-index: 10000;">
		加载中...
	</view>
</template>

<script>
</script>

<style>
	.aboutme{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #FFFFFF;
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgba(0,0,0,0.65);
	}
</style>

mian.js

//首页tabbar切换 闪屏
import loadingPlus from "@/common/mixin/loading-plus.vue"
Vue.component('loading-plus',loadingPlus)

页面

//最外层的view加上class
 class="animated fadeIn faster"
 
 
 <!-- 加载层	 -->
		<loading-plus v-if="beforeReady"></loading-plus>

导入js

import loading from "@/common/mixin/loading.js";
mixins:[loading],