62 行
1.7 KiB
Plaintext
62 行
1.7 KiB
Plaintext
<template>
|
|
<text>1帧内显示110个元素</text>
|
|
<view>
|
|
<view style="flex-direction: row;" v-for="(_,index) in 5" :key="index" flatten>
|
|
<view v-for="(_,i) in 10" :key="index+'-'+i" flatten>
|
|
<image src="/static/test-image/logo.png" style="width: 5px; height: 5px;" flatten></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="btnShow" @click="ShowEvent()">
|
|
<text class="btnText">同屏显示2000个图片</text>
|
|
</view>
|
|
<view>
|
|
<view v-if="show" style="flex-direction: row;" v-for="(_,index) in 50" :key="index" flatten>
|
|
<image v-for="(_,i) in 40" :key="index+'-'+i" style="width: 5px; height: 5px;margin: 0.5px;" flatten src="/static/test-image/logo.png"></image>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
let isBackPress = false;
|
|
const show = ref(false);
|
|
let startime = Date.now();
|
|
const ShowEvent = (() => {
|
|
startime = Date.now();
|
|
show.value = !show.value
|
|
});
|
|
// #ifdef APP
|
|
const insPage = getCurrentInstance().proxy.$page;
|
|
insPage.onRenderChange(({ duration }) => {
|
|
if(isBackPress){return}
|
|
const endtime = Date.now();
|
|
uni.showToast({
|
|
title: `${endtime - startime}ms`,
|
|
})
|
|
console.log(`show.value :${show.value} total duration(click -> render end):${endtime - startime} render duration:${duration}`)
|
|
});
|
|
// #endif
|
|
onBackPress(() => {
|
|
isBackPress = true
|
|
show.value = false
|
|
});
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.btnShow {
|
|
height: 48px;
|
|
margin: 16px;
|
|
background-color: #1677ff;
|
|
border-radius: 8px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
/* box-shadow: 0 4px 12px rgba(22, 119, 255, 0.3); */
|
|
}
|
|
|
|
.btnText {
|
|
color: #ffffff;
|
|
}
|
|
</style>
|