Carousel组件增加滑动时页面整体无法滚动的能力

[minwinter]

使用Carousel组件时，当左右滑动时，当前页面不进行上下左右页面的滚动，滑动完成后，当前页面可恢复滚动。

[xilihuasi]

Error Trace

看了下 Carousel 组件手势处理逻辑

// 判断滑动临界点
// 1.滑动距离超过0，且滑动距离和父容器长度之比超过moveDistanceRatio
// 2.滑动释放时间差低于moveTimeSpan
if (ratio >= moveDistanceRatio! || timeSpan <= moveTimeSpan!) {
  const action =
    (this.isDirectionX() && offsetX > 0) || (!this.isDirectionX() && offsetY > 0)
      ? 'prev'
      : 'next';

  activeIndex = action === 'next' ? activeIndex + 1 : activeIndex - 1;
}

在快速滑动时，偏移量（offsetX/offsetY）只要不为 0 就会触发切换。实际手势操作时（特别是上下滑动），容易产生主轴方向上的偏移，因此会导致意外的切换。

Solution

可以给 Carousel 添加 minMoveDistance 属性作为阈值，小于该值的偏移不进行切换。

[JeromeLin]

@xilihuasi 这里的滑动判断是 touchend 触发的，判断是否翻页。应该不是楼主想要的。 应该要在 onDragMove 方法里想办法处理