uni-app app端 swiper套swiper，内部swiper无法触发外部swiper的滑动效果

开发环境	版本号	项目创建方式
Windows	Windows 10 专业版	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：Windows 10 专业版

HBuilderX类型：正式

HBuilderX版本号：4.15

手机系统：Android

手机系统版本号：Android 7.1.1

手机厂商：华为

手机机型：VOG-AL10

页面类型：nvue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

<template>  
    <view style="background: red;">  
        <swiper style='height: 300rpx;'>  
            <swiper-item>  
                <view>  
                    <swiper vertical style='height: 150rpx;background: red;'>  
                        <swiper-item>  
                            <view style='height: 150rpx;background: green;'>在安卓端，绿色swiper部分只能上下滑动，不能左右滑动（快手、微信、抖音、H5 并无此问题）</view>  
                        </swiper-item>  
                        <swiper-item>  
                            <view style='height: 150rpx;background: green;'>在安卓端，绿色swiper部分只能上下滑动，不能左右滑动（快手、微信、抖音、H5 并无滑动问题）</view>  
                        </swiper-item>  
                    </swiper>  
                    <view>而安卓端触摸这里，才能左右滑动</view>  
                    <view>而安卓端触摸这里，才能左右滑动</view>  
                    <view>而安卓端触摸这里，才能左右滑动</view>  
                    <view>而安卓端触摸这里，才能左右滑动</view>  
                    <view>而安卓端触摸这里，才能左右滑动</view>  
                </view>  
            </swiper-item>  
            <swiper-item>  
                <view style='height: 100rpx;background: gray;'>如果没有嵌套swiper，是正常的 可以左右滑动的</view>  
            </swiper-item>  
        </swiper>  
    </view>  
</template>  

<script>  
</script>  

<style>  
    /* #ifdef MP-KUAISHOU */  
    swiper-item {    
      position: relative;    
    }    
    /* #endif */    
</style>

操作步骤：

在nvue的页面中，输入代码示例

预期结果：

希望在app端，用户左右滑动内部的swiper时，能触发外部的swiper的左右切换

实际结果：

在nvue下，运行于安卓，用户左右滑动内部的垂直swiper，无法触发外部横向的swiper滑动

bug描述：

想实现像抖音首页那样，可以上下刷视频，并且能左右滑动切换栏目的效果
于是使用两个 swiper 进行嵌套，
嵌套结构为：
先建立一个<swiper>，在其中第一个<swiper-item>中，又建立<swiper>
外部的<swiper>设置为左右滑动
<swiper-item>里的<swiper>设置为上下滑动
用nvue页面，运行与H5和小程序并没有异常符合需求
而运行于安卓端，出现了，用户左右滑动内部<swiper>的时候，无法触发外部swiper的左右滑动

更多关于uni-app app端 swiper套swiper，内部swiper无法触发外部swiper的滑动效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

yibo5220 1楼

怎么样，现在可以吗？遇到了相同的问题！

更多关于uni-app app端 swiper套swiper，内部swiper无法触发外部swiper的滑动效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

caililin 2楼

触摸的时候，得非常的靠近左右边，是可以引起左右滑动的

gougou168 3楼

跟你遇到了同样的问题，Android才出现的，ios没有问题，nvue是真的太坑了

phonegap100 4楼作者

在 uni-app 中，如果你在 swiper 组件内部嵌套了另一个 swiper，可能会出现内部 swiper 的滑动事件阻止了外部 swiper 的滑动效果。这是因为默认情况下，内部 swiper 会优先处理滑动事件，导致外部 swiper 无法接收到滑动事件。

解决方案

使用 touch 事件手动控制滑动

你可以通过监听 touchstart、touchmove 和 touchend 事件来手动控制内部和外部 swiper 的滑动行为。通过判断滑动的方向，来决定是触发内部 swiper 还是外部 swiper 的滑动。

<swiper [@change](/user/change)="onOuterSwiperChange" [@touchstart](/user/touchstart)="onTouchStart" [@touchmove](/user/touchmove)="onTouchMove" [@touchend](/user/touchend)="onTouchEnd">
  <swiper-item>
    <swiper [@change](/user/change)="onInnerSwiperChange">
      <swiper-item>Inner Slide 1</swiper-item>
      <swiper-item>Inner Slide 2</swiper-item>
    </swiper>
  </swiper-item>
  <swiper-item>Outer Slide 2</swiper-item>
</swiper>

export default {
  methods: {
    onTouchStart(e) {
      this.startX = e.touches[0].clientX;
      this.startY = e.touches[0].clientY;
    },
    onTouchMove(e) {
      const moveX = e.touches[0].clientX - this.startX;
      const moveY = e.touches[0].clientY - this.startY;
      if (Math.abs(moveX) > Math.abs(moveY)) {
        // 横向滑动，阻止默认行为
        e.preventDefault();
      }
    },
    onTouchEnd(e) {
      // 处理滑动结束的逻辑
    },
    onOuterSwiperChange(e) {
      console.log('Outer swiper changed', e.detail.current);
    },
    onInnerSwiperChange(e) {
      console.log('Inner swiper changed', e.detail.current);
    }
  }
}

使用 catch 事件

你可以使用 catch 事件来阻止内部 swiper 的滑动事件冒泡到外部 swiper。这样，内部 swiper 的滑动事件不会影响外部 swiper。

<swiper [@change](/user/change)="onOuterSwiperChange">
  <swiper-item>
    <swiper [@change](/user/change)="onInnerSwiperChange" catchtouchmove="onInnerSwiperMove">
      <swiper-item>Inner Slide 1</swiper-item>
      <swiper-item>Inner Slide 2</swiper-item>
    </swiper>
  </swiper-item>
  <swiper-item>Outer Slide 2</swiper-item>
</swiper>

export default {
  methods: {
    onInnerSwiperMove(e) {
      // 阻止内部 swiper 的滑动事件冒泡到外部 swiper
      return false;
    },
    onOuterSwiperChange(e) {
      console.log('Outer swiper changed', e.detail.current);
    },
    onInnerSwiperChange(e) {
      console.log('Inner swiper changed', e.detail.current);
    }
  }
}

使用 disable-touch 属性

在某些情况下，你可以通过设置 disable-touch 属性来禁用内部 swiper 的触摸事件，从而让外部 swiper 能够正常响应滑动事件。

<swiper [@change](/user/change)="onOuterSwiperChange">
  <swiper-item>
    <swiper [@change](/user/change)="onInnerSwiperChange" :disable-touch="true">
      <swiper-item>Inner Slide 1</swiper-item>
      <swiper-item>Inner Slide 2</swiper-item>
    </swiper>
  </swiper-item>
  <swiper-item>Outer Slide 2</swiper-item>
</swiper>

export default {
  data() {
    return {
      disableTouch: true
    };
  },
  methods: {
    onOuterSwiperChange(e) {
      console.log('Outer swiper changed', e.detail.current);
    },
    onInnerSwiperChange(e) {
      console.log('Inner swiper changed', e.detail.current);
    }
  }
}