android真机也是一样的卡ui
看官方建议优化不要那么多dom,但没法,再精简dom内容都没啥好显示的了
本来使用uni-recycle-view会觉得好很多,但它不支持多列表,v-show有bug,v-if效果不好,所以没法使用
以下是改了下官方的demo来最小复现问题
大致流程是:demo一进来就播放视频(为了更明显显示卡ui的效果),然后利用v-show来显示隐藏列表,就是这一步v-show切换会导致ui卡着,很明显视频会卡住,等列表渲染完才会继续播放
<template>
<video class="video"
src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo-720p.mp4"
:autoplay="true" :loop="true"></video>
<button @click="handleClick">切换</button>
<scroll-view style="flex: 1">
<view v-show="isShow">
<list-view class="list">
<list-item class="list-item" v-for="(_,index) in 20">
<text>第{{index + 1}}个视频</text>
<video class="video" :src="src" :controls="true"></video>
</list-item>
</list-view>
</view>
</scroll-view>
</template>
<script setup>
const src = ref('https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4')
const isShow = ref(true)
const handleClick = () => {
isShow.value = !isShow.value
}
</script>
视频附件: