Question

我的页面上有一个idangerous swiper，可以成功模拟幻灯片和随附滚动条上的触摸事件（允许鼠标单击和移动以向左或向右滑动幻灯片）。

这很好，但我现在已经在滑动器内的幻灯片上调用了draggable，这意味着我需要停止此触摸模拟（拖动幻灯片并同时移动它们会造成混乱） - 但仅限于幻灯片，而不是滚动条（我仍然需要滚动条才能像鼠标点击和移动一样运行）。

我尝试过什么

根据API，我可以禁用触摸模拟：

var swiper = new Swiper('.swiper', {
    slidesPerView: 3,
    simulateTouch: false,
    scrollbar: {
        container: '.swiper-scrollbar',
        hide: false,
        draggable: true,
        snapOnRelease: true
    }
});

这可以按预期工作，但在滚动条和幻灯片上都没有用。

我也试过从swiper api暴露的一些事件中返回false：

var swiper = new Swiper('.swiper', { slidesPerView: 3, onTouchStart: function() { return false; }, scrollbar: { container: '.swiper-scrollbar', hide: false, draggable: true, snapOnRelease: true } });

这根本没有任何效果。

Answer 1

这是Swiper-3.3.1的解决方案

simulateTouch:false

Answer 2

我找到了一种方法，就目前而言，我很高兴。

在idangerous swiper source（idangerous.swiper-2.1.js）中，我从onTouchStart函数返回false（第1120行），所以我的代码现在类似于以下内容：

    function onTouchStart(event) {
    if (params.preventLinks) _this.allowLinks = true;
    //Exit if slider is already was touched

    return false;

    if (_this.isTouched || params.onlyExternal) {
        return false;
    }

这对滚动条原型的工作方式也是非侵入性的，因此滚动条的触摸事件保持不变。

Answer 3

Swiper-6.6.2 的解决方案。

只需添加到您不想被滑动的对象的类“swiper-no-swiping”。然后只需将以下代码添加到您的 js 文件中。

const swiper = new Swiper('.swiper-container', {
    noSwipingClass: 'swiper-no-swiping'
});

可以禁用幻灯片的触摸模拟，但不能禁用滚动条（idangerous swiper）？

3 个答案: