uni-app 在 swiper-item 中 安卓视频上下滑动有时会失效 ios正常

uni-app 在 swiper-item 中 安卓视频上下滑动有时会失效 ios正常

开发环境 版本号 项目创建方式
Windows windows7 旗舰版 HBuilderX

操作步骤：

<view :data-index='idx' :style="{ height: height,width: width }" [@touchmove](/user/touchmove)="ListTouchMove"  
    @touchend.stop="ListTouchEnd" @touchstart="ListTouchStart">  
</view>

ListTouchStart(e) {  
        this.listTouchStartY = e.changedTouches[0].pageY  
        this.moverOnoff = false;   
        this.pagesy1 = e.changedTouches[0].pageY;  
    },  
ListTouchMove(e) {  
    this.listTouchDirection = this.listTouchStartY - e.changedTouches[0].pageY > 10 ? -1 : 0  
    this.listTouchDirection = e.changedTouches[0].pageY - this.listTouchStartY > 10 ? 1 : this.listTouchDirection  
    const distance = this.distance + e.changedTouches[0].pageY - this.listTouchStartY  
    if (distance > 0) return  
    if (Math.abs(this.listTouchStartY - e.changedTouches[0].pageY) < 2) {  
        this.listTouchDirection = null  
        }  
    },  
ListTouchEnd(e) {                
    let that = this;  
    if (e.changedTouches[0].pageY - that.pagesy1 < -30) {  
        if (uni.getSystemInfoSync().platform === 'android') {  
        }  
        return;  
    }  
    try {  
        that.clickVideo();  
        that.translateX = 10  
    } catch (e) {}  
    if (that.scroll) return  
    if (!that.listTouchDirection) {  
        return  
    }  
},

更多关于uni-app 在 swiper-item 中 安卓视频上下滑动有时会失效 ios正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 在 swiper-item 中 安卓视频上下滑动有时会失效 ios正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的Android手势冲突问题。在uni-app的swiper-item中，Android平台对touch事件的响应机制与iOS存在差异。

主要原因是Android系统在swiper容器内对垂直滑动的识别优先级较低，容易被swiper的横向滑动机制干扰。建议以下解决方案：

  1. 在touchstart事件中主动捕获事件：
ListTouchStart(e) {
    e.stopPropagation(); // 阻止事件冒泡
    // ...原有代码
}
  1. 为swiper组件添加@touchstart.stop和@touchmove.stop来隔离手势冲突：
<swiper @touchstart.stop @touchmove.stop>
    <!-- swiper-item内容 -->
</swiper>
  1. 调整touchmove的判断阈值，从10px增加到15-20px，避免微小移动被swiper拦截：
this.listTouchDirection = this.listTouchStartY - e.changedTouches[0].pageY > 20 ? -1 : 0
回到顶部