uni-app 安卓nvue中swiper组件存在问题 当swiper-item内包含list组件时 通过手势滑动source变为autoplay

uni-app 安卓nvue中swiper组件存在问题 当swiper-item内包含list组件时 通过手势滑动source变为autoplay

示例代码：

详细代码见附件

操作步骤：

在安卓下运行demo项目

预期结果：

通过手势左右滑动时，source 应该是 touch 而不是 autoplay

实际结果：

通过手势左右滑动时，source 是 autoplay

bug描述：

2021-04-19 信息补充

  1. 最新在回顾这个问题的时候重新写了个demo，可以稳定复现问题了
  2. 安卓且在 nvue 下，如果 swiper-item 内包含 list 组件，则当对其手势滑动的时候，会出现 source: autoplay
  3. 附件中demo运行日志见附件，page2是包含list的nvue，则 page2 到 page1 或 page2 到page3 的时候 source 都是 autoplay
16:23:44.932 [Number] 1 , touch at pages/index/index.js:29  
16:23:45.583 [Number] 2 , touch at pages/index/index.js:29  
16:23:46.079 [Number] 3 , autoplay at pages/index/index.js:29  
16:23:47.337 [Number] 2 , touch at pages/index/index.js:29  
16:23:47.872 [Number] 1 , autoplay at pages/index/index.js:29  
16:23:48.467 [Number] 0 , touch at pages/index/index.js:29  
16:23:50.675 [Number] 1 , touch at pages/index/index.js:29  
16:23:51.133 [Number] 2 , touch at pages/index/index.js:29  
16:23:51.608 [Number] 3 , autoplay at pages/index/index.js:29  
16:23:52.371 [Number] 2 , touch at pages/index/index.js:29  
16:23:52.800 [Number] 1 , autoplay at pages/index/index.js:29  
16:23:53.150 [Number] 0 , touch at pages/index/index.js:29

历史信息

  1. Swiper 组件有问题，清空APP数据后，首次加载会触发 autoplay 且 current 为0
  2. 重新打开app后，不触发onSwiper的 autoplay
  3. iOS没有这个问题，直接显示第三页，安卓下会先显示第一页
16:24:35.032 onSwiper, [Object] {"current":0,"currentItemId":"","source":"autoplay"}  at pages/works/index/index.js:57

附件

Image 1

Image 2

swiper-test.zip


更多关于uni-app 安卓nvue中swiper组件存在问题 当swiper-item内包含list组件时 通过手势滑动source变为autoplay的实战教程也可以访问 https://www.itying.com/category-93-b0.html

14 回复

HBuilderX alpha 3.1.22+ 已修复

更多关于uni-app 安卓nvue中swiper组件存在问题 当swiper-item内包含list组件时 通过手势滑动source变为autoplay的实战教程也可以访问 https://www.itying.com/category-93-b0.html


完整示例发下

已经贴了demo项目，我更新了下问题描述应该是同一个问题

回复 青阳_1900: 收到

回复 DCloud_Android_ST: 麻烦问下这个问题大概什么时候能修复？

回复 DCloud_Android_ST: 请问下有修复计划了没？

3.1.16.20210525-alpha 版本中包含疑似相关问题 App-Android平台 修复 nvue swiper 组件动态加载数据时会跳到第一个 swiper-item 的bug 详情 修复
但是会产生新问题，会出现 swiper-item 空白问题，目前不确定2问题是否有相关性

有示例demo吗 发出来我测试下

回复 DCloud_Android_ST: 稍等我整一下，就是 swiper 配置成循环的时候，当滑动到最后一个再回到第一个的时候，会出现空白，然后再滑动出现 第一个 swiper-item 的内容

@DCloud_Android_ST 附件一个是源码，一个是视频。可以稳定复现，安卓 nvue 下有问题，苹果正常

收到

请问这个问题有进展没？

反馈了 预计下个版本修复

这是一个已知的nvue在Android平台上的兼容性问题。当swiper-item内包含list组件时，Android系统会将手势滑动事件错误识别为autoplay触发，导致source参数返回异常。

问题根源在于Android平台下list组件与swiper组件的手势事件冲突。list组件默认会拦截触摸事件，当在list区域进行滑动时，系统可能误判为autoplay触发的切换。

目前可行的解决方案：

  1. 避免在swiper-item中直接使用list组件，可以考虑使用scroll-view替代

  2. 通过动态控制autoplay属性来规避：

// 在滑动开始时关闭autoplay
onTouchStart() {
    this.autoplay = false
},
// 滑动结束后重新开启
onTouchEnd() {
    setTimeout(() => {
        this.autoplay = true
    }, 1000)
}
  1. 使用条件编译针对Android平台做特殊处理：
// #ifdef APP-PLUS && APP-NVUE
// Android nvue特殊处理
// #endif
回到顶部