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

本文针对移动端（尤其是ios）上使用swiper组件时，水平滑动可能触发垂直页面滚动的问题，提供了一种解决方案。通过分析问题原因，并结合swiper的配置和事件处理，最终确认该问题在ios 16.x版本中已得到修复。同时，也为遇到类似问题的开发者提供排查思路和潜在的解决方向。

*   **`preventDefault` 的使用：**  需要谨慎使用`preventDefault`，因为它会阻止元素的默认行为，可能会影响其他功能的正常使用。

4. Swiper事件结合状态控制：

   提问者使用onBeforeTransitionStart和onTransitionEnd结合mobileScrollLock状态来尝试锁定滚动，这是一个很好的思路。可以进一步优化，例如：

   • 在滑动开始时，记录当前的滚动位置。
   • 在滑动过程中，阻止垂直滚动。
   • 在滑动结束后，恢复到之前的滚动位置。

   import { useState, useRef } from 'react';
   import { Swiper, SwiperSlide } from 'swiper/react';
   import 'swiper/css';
   
   function MySwiper() {
     const [isSwiping, setIsSwiping] = useState(false);
     const scrollPosition = useRef(0);
   
     const handleTouchStart = () => {
       scrollPosition.current = window.pageYOffset;
       setIsSwiping(true);
     };
   
     const handleTouchMove = (e) => {
       if (isSwiping) {
         e.preventDefault(); // 阻止默认滚动
         window.scrollTo(0, scrollPosition.current); // 保持滚动位置
       }
     };
   
     const handleTouchEnd = () => {
       setIsSwiping(false);
     };
   
     return (
       <div
         onTouchStart={handleTouchStart}
         onTouchMove={handleTouchMove}
         onTouchEnd={handleTouchEnd}
       >
         <Swiper /* Swiper配置 */ >
           {/* Swiper slides */}
         </Swiper>
       </div>
     );
   }
   
   export default MySwiper;

注意事项

智川X-Agent

中科闻歌推出的一站式AI智能体开发平台

下载

• 设备和浏览器兼容性： 不同的设备和浏览器对触摸事件的处理方式可能不同。因此，需要进行充分的测试，以确保解决方案在各种环境下都能正常工作。
• 用户体验： 在阻止默认滚动行为时，需要注意用户体验。避免过度阻止滚动，以免影响用户的正常操作。

总结

解决Swiper在移动端水平滚动时垂直页面滚动的问题，需要综合考虑Swiper的配置、CSS样式和事件处理。 虽然该问题可能在特定版本中得到修复，但了解这些解决方案仍然有助于应对其他类似的触摸事件冲突问题。 重要的是，在解决问题的过程中，要充分考虑用户体验，并进行充分的测试。