var swiper1 = new Swiper(swiperId, { // 禁用滑动切换效果 allowTouchMove: false, // 其他 Swiper 选项 // ... });pc端禁用不生效
时间: 2023-09-15 08:16:09 浏览: 207
swiper移动端滑动切换选项卡特效代码
如果你想在 PC 端禁用 Swiper 的滑动切换效果,可以通过设置 `allowTouchMove` 属性为 `false` 来实现。但是,如果你在 PC 端使用鼠标滚轮来滚动页面,Swiper 可能会与页面滚动产生冲突,导致禁用不生效。这时,你可以通过监听鼠标滚轮事件,来手动禁止滚轮滚动时的 Swiper 操作。具体实现方式可以参考以下代码:
```js
var swiper1 = new Swiper(swiperId, {
allowTouchMove: false,
// 其他 Swiper 选项
// ...
});
var container = document.querySelector(swiperId);
container.addEventListener('wheel', function (event) {
if (swiper1.mousewheel.enabled) {
swiper1.mousewheel.disable();
container.scrollTop += event.deltaY;
setTimeout(function () {
swiper1.mousewheel.enable();
}, 500);
event.preventDefault();
}
});
```
以上代码中,我们通过监听容器元素的 `wheel` 事件来禁止鼠标滚轮滚动时的 Swiper 操作。在事件处理函数中,我们首先判断鼠标滚轮事件是否已启用了 Swiper 的 mousewheel 模块,如果是,则通过 `disable` 方法禁用该模块。然后,我们手动调整容器元素的 `scrollTop` 值,来实现滚动效果。最后,我们通过 `setTimeout` 方法延迟一段时间后,再通过 `enable` 方法启用 mousewheel 模块,以恢复 Swiper 的滑动切换效果。需要注意的是,由于我们禁用了鼠标滚轮事件的默认行为,所以需要在事件处理函数中显式地调用 `event.preventDefault()` 方法来阻止默认行为的发生。
阅读全文