在 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,
})