解决Swiper在移动端水平滑动时页面垂直滚动的问题

本文针对在移动端使用swiper组件时，水平滑动操作可能触发页面垂直滚动的问题，提供了一种解决方案。通过了解问题产生的根本原因，并结合swiper的配置和事件处理，可以有效地避免滑动冲突，提升用户体验。虽然该问题在 ios 16.x 版本中已得到修复，但本文的解决方案仍然具有参考价值，可以应用于其他类似场景。

在使用Swiper组件构建移动端应用时，一个常见的问题是水平滑动Swiper时，页面可能会意外地垂直滚动，尤其是在iOS设备上。这会严重影响用户体验，让用户感觉滑动不流畅、不自然。虽然该问题在 iOS 16.x 版本中已得到修复，但了解问题的原因和解决方案仍然很有价值。 **问题根源** 这个问题通常是由于触摸事件的传播机制导致的。当用户在Swiper上进行滑动操作时，触摸事件会被传递到Swiper组件，Swiper会根据滑动方向和距离来判断是否进行水平滑动。然而，如果滑动角度略微偏离水平方向，或者滑动距离较短，触摸事件也可能被传递到页面，从而触发页面的垂直滚动。 **解决方案** 虽然原始问题在 iOS 16.x 版本中已得到修复，但以下是一些通用的解决方案，可以用来解决类似的滑动冲突问题： 1. **Swiper配置调整：** * `shortSwipes`: 调整短距离滑动的灵敏度。 * `longSwipes`: 调整长距离滑动的灵敏度。 * `touchAngle`: 设置触发滑动的最小角度。 * `threshold`: 设置触发滑动的最小距离。 * `resistance`: 设置滑动超出边界时的阻力。 ```javascript {/* Swiper Slides */}

2. CSS样式控制：

   • touch-action: pan-y; 或 touch-action: pan-x;: 使用 CSS 属性 touch-action 可以控制元素如何响应触摸事件。pan-y 允许垂直滚动，禁止水平滚动，pan-x 则相反。

   .swiper-container {
       touch-action: pan-y; /* 允许垂直滚动，禁止水平滚动 */
   }

   需要注意的是，直接在 Swiper 容器上设置 touch-action: none; 会完全禁用滑动，包括垂直滚动，这可能不是期望的结果。

3. 事件处理：

   通过监听Swiper的onTouchStart、onTouchMove和onTouchEnd事件，可以更精细地控制滑动行为。

   • 在 onTouchStart 事件中，记录触摸起始位置。
   • 在 onTouchMove 事件中，计算滑动方向和距离，如果水平滑动距离大于垂直滑动距离，则阻止默认的垂直滚动行为。
   • 在 onTouchEnd 事件中，恢复默认的滚动行为。

   const [startTouch, setStartTouch] = useState({ x: 0, y: 0 });
   
   const handleTouchStart = (e) => {
       setStartTouch({ x: e.touches[0].clientX, y: e.touches[0].clientY });
   };
   
   const handleTouchMove = (e) => {
       const deltaX = e.touches[0].clientX - startTouch.x;
       const deltaY = e.touches[0].clientY - startTouch.y;
   
       if (Math.abs(deltaX) > Math.abs(deltaY)) {
           // 水平滑动，阻止垂直滚动
           e.preventDefault();
       }
   };
   
   
       {/* Swiper Slides */}
   

4. 状态控制：

   根据Swiper的滑动状态，动态地启用或禁用页面的垂直滚动。

   • 在Swiper开始滑动时，禁用页面的垂直滚动。
   • 在Swiper滑动结束时，恢复页面的垂直滚动。

   const [mobileScrollLock, setMobileScrollLock] = useState(false);
   
   const disableScroll = () => {
       document.body.style.overflow = 'hidden';
       document.documentElement.style.overflow = 'hidden';
   }
   
   const enableScroll = () => {
       document.body.style.overflow = '';
       document.documentElement.style.overflow = '';
   }
   
    {
           setMobileScrollLock(true);
           disableScroll();
       }}
       onTransitionEnd={() => {
           setMobileScrollLock(false);
           enableScroll();
       }}
   >
       {/* Swiper Slides */}
   

注意事项

• 不同的Swiper版本和设备可能会有不同的表现，需要根据实际情况进行调整。
• 在禁用页面垂直滚动时，需要注意恢复滚动，否则用户将无法滚动浏览整个页面。
• 过度阻止滚动可能会影响用户体验，需要权衡利弊。

总结

虽然 iOS 16.x 修复了水平滑动 Swiper 时页面垂直滚动的问题，但理解问题的本质和解决方案仍然重要。通过合理配置 Swiper、使用 CSS 样式控制、监听触摸事件以及动态控制页面滚动，可以有效地避免滑动冲突，提升移动端应用的流畅性和用户体验。在实际开发中，应根据具体情况选择合适的解决方案，并进行充分的测试，以确保最佳效果。