uni-app uni-swiper-list 嵌套 waterfall 无法滑动

在 uni-app 中，如果你在 uni-swiper-list 中嵌套了 waterfall 组件，并且发现无法滑动，可能是由于事件冲突或布局问题导致的。以下是一些可能的解决方案：

1. 检查事件冲突

uni-swiper-list 和 waterfall 组件可能都监听了滑动事件，导致事件冲突。你可以尝试在 waterfall 组件上设置 @touchstart 和 @touchend 事件，并在事件处理函数中阻止事件冒泡，以避免 uni-swiper-list 误判滑动事件。

<template>
  <uni-swiper-list>
    <waterfall @touchstart.stop="handleTouchStart" @touchend.stop="handleTouchEnd">
      <!-- waterfall content -->
    </waterfall>
  </uni-swiper-list>
</template>

<script>
export default {
  methods: {
    handleTouchStart() {
      // 处理 touchstart 事件
    },
    handleTouchEnd() {
      // 处理 touchend 事件
    }
  }
}
</script>

2. 调整布局

确保 waterfall 组件的布局不会超出 uni-swiper-list 的边界。如果 waterfall 的内容过多，可能会导致 uni-swiper-list 无法正确识别滑动事件。你可以尝试限制 waterfall 的高度，或者使用 scroll-view 包裹 waterfall 来实现内部滚动。

<template>
  <uni-swiper-list>
    <scroll-view scroll-y style="height: 500px;">
      <waterfall>
        <!-- waterfall content -->
      </waterfall>
    </scroll-view>
  </uni-swiper-list>
</template>

3. 使用 touch-action 属性

在某些情况下，使用 CSS 的 touch-action 属性可以解决滑动冲突问题。你可以尝试在 waterfall 组件上设置 touch-action: none;，以禁用默认的触摸行为。

<template>
  <uni-swiper-list>
    <waterfall style="touch-action: none;">
      <!-- waterfall content -->
    </waterfall>
  </uni-swiper-list>
</template>

4. 使用 @touchmove 事件

如果以上方法无效，你可以尝试在 waterfall 组件上监听 @touchmove 事件，并在事件处理函数中手动控制滑动的行为。

<template>
  <uni-swiper-list>
    <waterfall @touchmove="handleTouchMove">
      <!-- waterfall content -->
    </waterfall>
  </uni-swiper-list>
</template>

<script>
export default {
  methods: {
    handleTouchMove(event) {
      // 手动控制滑动行为
    }
  }
}
</script>