uni-app 快应用 swiper嵌套问题，里层滑动时外层也跟随滑动

操作步骤：

滑动banner

预期结果：

banner变化，外层的滑动页面不切换

实际结果：

banner微微滑动，外层的swiper也滑动切换页面

bug描述：

快应用，外层swiper对应三个swiper-item页面，三个页面中每个页面均有一个banner嵌套，里层banner滑动外层也滑动

bupafengyu 1楼

更多关于uni-app 快应用 swiper嵌套问题，里层滑动时外层也跟随滑动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

这是一个典型的嵌套swiper事件冒泡问题。在uni-app快应用中，当内层swiper滑动时会触发touch事件，这些事件会冒泡到外层swiper导致外层也响应滑动。

解决方案：

使用@touch事件阻止冒泡

<swiper @touchstart="onTouchStart" @touchmove="onTouchMove">

methods: {
  onTouchStart(e) {
    e.stopPropagation()
  },
  onTouchMove(e) {
    e.stopPropagation()
  }
}

使用@change事件控制外层swiper

<swiper :current="currentPage" [@change](/user/change)="onSwiperChange">

data() {
  return {
    disableOuterSwiper: false
  }
},
methods: {
  onSwiperChange(e) {
    if (this.disableOuterSwiper) {
      this.$refs.outerSwiper.setCurrent(this.currentPage)
      return
    }
    this.currentPage = e.detail.current
  }
}