swiper组件与ios的物理返回冲突问题解决办法

在 iOS 上，左滑手势会触发浏览器的返回操作，而 swiper 组件的左右滑动也会触发左滑手势，从而导致冲突。为了解决这个问题，你可以在 swiper 组件上添加 touchstart 和 touchmove 事件的监听，然后在事件处理函数中禁止左滑手势的默认行为。具体做法如下：

// 获取 swiper 元素
const swiperEl = document.querySelector('.swiper-container');

// 添加 touchstart 和 touchmove 事件的监听
swiperEl.addEventListener('touchstart', touchStartHandler);
swiperEl.addEventListener('touchmove', touchMoveHandler);

// touchstart 事件处理函数
function touchStartHandler(e) {
  // 记录初始触摸位置
  this.touchStartX = e.touches[0].pageX;
  this.touchStartY = e.touches[0].pageY;
}

// touchmove 事件处理函数
function touchMoveHandler(e) {
  // 计算触摸位移
  const deltaX = e.touches[0].pageX - this.touchStartX;
  const deltaY = e.touches[0].pageY - this.touchStartY;
  // 判断是否为左滑手势
  if (deltaX < 0 && Math.abs(deltaX) > Math.abs(deltaY)) {
    // 阻止浏览器默认行为
    e.preventDefault();
  }
}

通过上述代码，你可以禁止 swiper 组件左滑手势的默认行为，以避免与 iOS 的左滑物理返回冲突。

此处为分割线~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

收到客户反馈，想实现屏幕边缘拖动触发返回事件并非切换上下页，此时可使用swiper自带API：edgeSwipeDetection。

设置为true开启屏幕边缘探测。如果拖动是从屏幕边缘(默认20px)开始则不触发swiper，这样当你在屏幕边缘滑动Swiper时，则可以返回上一页（history.back）或切换至下一页。
如设置为'prevent'则禁止系统的返回上一页功能。(6.4.6)
*即使不开启此功能，ios设备在0px边缘拖动也有切换上下页功能。（此段落摘自swiper官网）
使用方法如下：

  var mySwiper = new Swiper('.swiper', {
    edgeSwipeDetection: true,
  })