优化白屏的方案

一个优化白屏的方法

index.vue页面

<template>
	<view class="indexBox">
		<view class="" v-for="item in 50">
			<Test v-if="defer(item)"></Test>
		</view>
	</view>
</template>
<script setup>
	import Test from "./test.vue"
	import {
		useDefer
	} from "./yxq.js"

	const defer = useDefer()
</script>

test.veu页面

<template>
	<view class="boxt">
		<view class="" v-for="item in 500">
			*
		</view>
	</view>
</template>
<script>
</script>
<style scoped>
	.boxt {
		display: flex;
		flex-wrap: wrap;
		border: 1px solid #000;
	}
</style>

yxq.js方法

import {
	ref
} from 'vue'
const count = ref(0)

function update() {
	count.value++
	requestAnimationFrame(update)
}
update()
export function useDefer() {
	return function(n) {
		return count.value >= n
	}
}