春雷Le
春雷Le
  • 发布:2019-08-23 16:51
  • 更新:2022-06-05 16:45
  • 阅读:1605

【报Bug】安卓下nvue swiper中嵌套video v-for循环swiper-item新增videoList会导致swiper重新渲染

分类:nvue

详细问题描述

[内容]

nvue swiper中嵌套video v-for循环swiper-item新增videoList会导致swiper重新渲染

[步骤]

[结果]

[期望]
只渲染新增部分

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明] HBuilderX2.2.2

[IDE版本号]

[windows版本号] win10

[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序?] app

[运行端版本号]

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]

[编译模式是老模板模式还是新的自定义组件模式?]

App运行环境说明

[Android版本号] 小米8

[iOS版本号]

[手机型号]

[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段] <swiper class="swiper" vertical="true" @change="changeCurrent" current="index"> <swiper-item v-for="(item, index) in videoList" :key="index" class="swiper-item" >
<video class="video" :src="item.src" >
</video>
</swiper-item>
</swiper>
新增videoList数据
## 联系方式

[QQ]

2019-08-23 16:51 负责人:无 分享
已邀请:
春雷Le

春雷Le (作者) - 私信,接各种特效

<swiper  
            class="swiper"  
            :vertical="true"  
            @change="changeCurrent"  
            :current="index">  
            <swiper-item v-for="(item, index) in videoList" :key="index" class="swiper-item">  
                <chunlei-video class="video" :src="item.src" >  
                </chunlei-video>  
            </swiper-item>  
        </swiper>  
  • 下一页丶翻

    超过两个感觉就重新渲染了,切换。都看不到暂停的画面,两个来回切换倒是看得到向抖音一样

    2019-09-25 17:56

  • 春雷Le (作者)

    回复 下一页丶翻: 这个不支持动态渲染,没办法。swiper有些属性也不支持

    2019-09-25 17:59

  • 下一页丶翻

    回复 春雷Le: 那还不如用网页版的吗,哈

    2019-09-26 09:10

  • 春雷Le (作者)

    回复 下一页丶翻: 网页版性能不好

    2019-09-26 10:20

8***@qq.com

8***@qq.com

我也遇到了。。加载下一页数据时,videoList改变就重新渲染了,IOS没问题的。。你解决了吗?还是不用这个了?

1***@qq.com

1***@qq.com

我也遇到这个问题了

4***@qq.com

4***@qq.com

nvue swiper 动态数据会出现重复渲染,且会跳转到第一个swiper-item,你们是怎么解决的

梦尋Junjie

梦尋Junjie - 原来她有男朋友

swiper 在切换的时候 默认有 500毫秒的延迟 , 在这时候 渲染 会导致 video 错位
其次是 安卓端 video 使用的并不是 h5 的 video , 这就导致了 在初始化位置时 swiper 的动画还在动 而 video 已经确定了位置,

如果你们要做类似于抖音的 ,请不要用循环生成 而是使用三个 swiper-item<放置封面> 和 video , 这样的思路来解决,

该问题目前已经被锁定, 无法添加新回复