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

**注意事项：**  `touch-action: none;` 可能会影响其他需要触摸操作的元素，因此需要谨慎使用。

2. javascript 滚动锁定：

   可以使用 JavaScript 来检测滑动的方向，并根据方向来阻止或允许垂直滚动。这种方法比较复杂，但可以提供更精细的控制。

   let startX, startY;
   
   swiper.on('touchstart', (event) => {
     startX = event.touches[0].clientX;
     startY = event.touches[0].clientY;
   });
   
   swiper.on('touchmove', (event) => {
     const deltaX = event.touches[0].clientX - startX;
     const deltaY = event.touches[0].clientY - startY;
   
     // 判断滑动方向，如果水平滑动距离大于垂直滑动距离，则阻止垂直滚动
     if (Math.abs(deltaX) > Math.abs(deltaY)) {
       event.preventDefault(); // 阻止默认的滚动行为
     }
   });

   注意事项： 这种方法需要仔细调整阈值，以避免误判滑动方向。

3. 调整 Swiper 参数：

   尝试调整 Swiper 的 shortSwipes、longSwipes 和 threshold 等参数，以改变 Swiper 对滑动操作的敏感度。

   

   天工大模型

   中国首个对标ChatGPT的双千亿级大语言模型

   下载

   const swiper = new Swiper('.swiper-container', {
     shortSwipes: false, // 禁用短距离滑动
     longSwipesRatio: 0.5, // 长距离滑动所需比例
     threshold: 10, // 滑动触发的最小距离
   });

   注意事项： 这些参数的具体值需要根据实际情况进行调整。

总结

解决移动端 Swiper 水平滚动时垂直页面滚动的问题，最直接有效的方法是升级到 iOS 16.x 或更高版本。如果无法升级系统，可以尝试使用 touch-action 属性、JavaScript 滚动锁定或调整 Swiper 参数等方法来规避这个问题。选择哪种方法取决于你的具体需求和目标用户群体。在实际应用中，可能需要结合多种方法才能达到最佳效果。