uni-app swiper组件动态追加数据时安卓端返回第一条重新加载数据问题

uni-app swiper组件动态追加数据时安卓端返回第一条重新加载数据问题

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 win10
HBuilderX类型 正式
HBuilderX版本 3.0.7
手机系统 Android
手机版本号 Android 11
手机厂商 OPPO
手机机型 安卓机
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

操作步骤:

that.videoList = that.videoList.concat(res.data.data), //往里面追加数据

预期结果:

1

实际结果:

1

bug描述:

swiper中设置了@change=“changeCurrent”,重新加载数据下标会重置为0的问题
而在ios下,不会出现这个问题!!
已经有多个人遇到这个问题了,官方不打算解决下吗
https://ask.dcloud.net.cn/question/87935
https://ask.dcloud.net.cn/question/113530
https://ask.dcloud.net.cn/question/96199



更多关于uni-app swiper组件动态追加数据时安卓端返回第一条重新加载数据问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

收到,将会排查

更多关于uni-app swiper组件动态追加数据时安卓端返回第一条重新加载数据问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


完整示例提供下

https://ext.dcloud.net.cn/plugin?id=664 用的是这个组件,你们简单改一下push数据就行了

我也遇到这个问题,不知道什么时候可以修复这个bug

这是一个已知的Android平台下swiper组件的兼容性问题。当动态追加数据时,Android端会触发swiper重新渲染导致currentIndex重置为0。

解决方案:

  1. 在追加数据前记录当前currentIndex:
let current = this.currentIndex;
this.videoList = this.videoList.concat(res.data.data);
  1. 使用nextTick在数据更新后恢复位置:
this.$nextTick(() => {
    this.currentIndex = current;
});
  1. 或者使用:current属性绑定:
<swiper :current="currentIndex" [@change](/user/change)="changeCurrent">
回到顶部