uni-app swiper内嵌swiper，无法滑动内部的swiper
uni-app swiper内嵌swiper，无法滑动内部的swiper
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | 22000.2295 | HBuilderX 3.98 |
示例代码：
```swift
<swiper :indicator-dots="true" :circular="true" style="height: 800rpx;" [@tap](/user/tap).stop>
<swiper-item v-for="(item,index) in 10" :key="index" [@tap](/user/tap).stop>
<view class="" style="height: 800rpx;background-color: red;" [@tap](/user/tap).stop>
<text style="color: white;">{{ index }}</text>
<swiper :indicator-dots="true" :circular="true" style="height: 400rpx;margin-top: 100rpx;" [@tap](/user/tap).stop>
<swiper-item v-for="(item,index) in 3" :key="index" [@tap](/user/tap).stop>
<view class="" style="height: 400rpx;background-color: blue;" [@tap](/user/tap).stop>
<text style="color: white;">{{ index }}</text>
</view>
</swiper-item>
</swiper>
</view>
</swiper-item>
</swiper>操作步骤： 见代码示例
预期结果：
内外分开滑动，像uni-app就可以。实际结果： uni-app x不能实现滑动内部
bug描述：
如题
2 回复
在 uni-app 中使用 swiper 组件嵌套 swiper 时，可能会出现内部 swiper 无法滑动的情况。这通常是由于事件冒泡或手势冲突导致的。以下是一些解决方案：
1. 使用 @touchstart 和 @touchend 事件
你可以在内部 swiper 上添加 @touchstart 和 @touchend 事件来阻止事件冒泡，从而解决滑动冲突。
<template>
<swiper>
<swiper-item>
<swiper @touchstart="handleTouchStart" @touchend="handleTouchEnd">
<swiper-item>内部内容1</swiper-item>
<swiper-item>内部内容2</swiper-item>
</swiper>
</swiper-item>
<swiper-item>外部内容2</swiper-item>
</swiper>
</template>
<script>
export default {
methods: {
handleTouchStart(e) {
e.stopPropagation();
},
handleTouchEnd(e) {
e.stopPropagation();
}
}
}
</script>2. 使用 @change 事件
你可以在外部 swiper 的 @change 事件中动态控制内部 swiper 的滑动行为。
<template>
<swiper @change="handleSwiperChange">
<swiper-item>
<swiper :current="innerCurrent">
<swiper-item>内部内容1</swiper-item>
<swiper-item>内部内容2</swiper-item>
</swiper>
</swiper-item>
<swiper-item>外部内容2</swiper-item>
</swiper>
</template>
<script>
export default {
data() {
return {
innerCurrent: 0
};
},
methods: {
handleSwiperChange(e) {
// 根据外部 swiper 的滑动情况，动态调整内部 swiper 的 current
this.innerCurrent = e.detail.current;
}
}
}
</script>3. 使用 @touchmove 事件
你可以在内部 swiper 上添加 @touchmove 事件来阻止事件冒泡。
<template>
<swiper>
<swiper-item>
<swiper @touchmove="handleTouchMove">
<swiper-item>内部内容1</swiper-item>
<swiper-item>内部内容2</swiper-item>
</swiper>
</swiper-item>
<swiper-item>外部内容2</swiper-item>
</swiper>
</template>
<script>
export default {
methods: {
handleTouchMove(e) {
e.stopPropagation();
}
}
}
</script>4. 使用 @transition 事件
你可以在外部 swiper 的 @transition 事件中动态控制内部 swiper 的滑动行为。
<template>
<swiper @transition="handleSwiperTransition">
<swiper-item>
<swiper :current="innerCurrent">
<swiper-item>内部内容1</swiper-item>
<swiper-item>内部内容2</swiper-item>
</swiper>
</swiper-item>
<swiper-item>外部内容2</swiper-item>
</swiper>
</template>
<script>
export default {
data() {
return {
innerCurrent: 0
};
},
methods: {
handleSwiperTransition(e) {
// 根据外部 swiper 的滑动情况，动态调整内部 swiper 的 current
this.innerCurrent = e.detail.current;
}
}
}
</script>5. 使用 [@animationfinish](/user/animationfinish) 事件
你可以在外部 swiper 的 [@animationfinish](/user/animationfinish) 事件中动态控制内部 swiper 的滑动行为。
<template>
<swiper [@animationfinish](/user/animationfinish)="handleSwiperAnimationFinish">
<swiper-item>
<swiper :current="innerCurrent">
<swiper-item>内部内容1</swiper-item>
<swiper-item>内部内容2</swiper-item>
</swiper>
</swiper-item>
<swiper-item>外部内容2</swiper-item>
</swiper>
</template>
<script>
export default {
data() {
return {
innerCurrent: 0
};
},
methods: {
handleSwiperAnimationFinish(e) {
// 根据外部 swiper 的滑动情况，动态调整内部 swiper 的 current
this.innerCurrent = e.detail.current;
}
}
}
</script>