自学的烦恼
自学的烦恼
  • 发布:2024-12-01 19:32
  • 更新:2024-12-03 11:37
  • 阅读:182

uvue的列表到底要怎么优化才不会卡ui?

分类:uni-app x

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>

视频附件:

2024-12-01 19:32 负责人:无 分享
已邀请:
自学的烦恼

自学的烦恼 (作者) - 自学的烦恼

来官方大佬解决下,卡在这里,真不知道该怎么优化

choin

choin

dom层多了我也没感觉出啥太大的卡顿,我的dom层级都有7.8层了,用的scroll也流畅的一批
,感觉比之前nvue好的不是一星半点,所以我是能接受的
顶多就是同步操作的时候会卡一下,用异步就好了
有个思路,你可以把v-if改为position移除屏幕外,true就是移到屏幕内
我觉得可能官方说的卡顿是日历那种不能使用list-view回收的场景

  • 自学的烦恼 (作者)

    现在一个页面是类似电视那样,正在播放视频,点击后弹出一级列表,再点还有二级列表

    移出屏幕外也解决不了问题,因为我还要判断去切换二级列表,所以只要有弹出列表,视频都会卡顿一下,这点是没法接受的

    你看官方代码,循环才20个而已,我只是加了个v-show去切换来回显示就达到很明显的卡顿效果

    2024-12-02 22:34

  • choin

    回复 自学的烦恼: 我记得文档里有个安卓多线程操作,你找找,估计需要涉及原生操作了,不过我觉得官方应该出一个方法可以启用多线程才好

    2024-12-02 23:35

DCloud_Android_ST

DCloud_Android_ST

测试设备什么型号 系统版本 提供下,其次是否云打包release正式版apk, 有些设备调试运行性能底下,需要release正式版apk才能看到正常性能表现

  • 自学的烦恼 (作者)

    小米11,Android 14

    hbx alpha 4.36 云打包正式版

    已更新问题,麻烦看看截图

    2024-12-03 13:37

  • 自学的烦恼 (作者)

    你们新建一个demo也是能复现的,毕竟这也是官方的demo改了下而已

    2024-12-03 13:39

  • DCloud_Android_ST

    回复 自学的烦恼: 收到 我们测试排查下

    2024-12-03 15:36

  • DCloud_Android_ST

    回复 自学的烦恼: 可以通过style中配置visibility 代替v-show

    2024-12-03 18:45

  • 自学的烦恼 (作者)

    回复 DCloud_Android_ST: 感谢,确实可以,不卡UI了

    2024-12-03 21:29

  • choin

    回复 DCloud_Android_ST: 啥原理?告知一下呗,v-show内部的实现不是visibility吗?现在我都不敢用v-show,全部替换了v-if,v-show太不稳定了

    2024-12-05 21:03

  • DCloud_Android_ST

    回复 choin: visibility 不涉及排版,v-if跟v-show涉及排版 你有什么问题就发帖反馈bug

    2024-12-06 15:36

要回复问题请先登录注册