4

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

这很好，但我现在在滑动器内的幻灯片上调用了可拖动，这意味着我需要停止这种触摸模拟（拖动幻灯片并同时移动它们会造成混乱）——但仅限于幻灯片上，而不是滚动条（我仍然需要滚动条在鼠标单击和移动之后发挥作用）。

我试过的

根据 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 } });

这根本没有任何影响。

4

3 回答 3

13

这是 Swiper-3.3.1 的解决方案

simulateTouch:false
于 2016-02-26T14:44:16.173 回答
2

我找到了一种方法，目前我很满意。

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

    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;
    }

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

于 2014-05-21T13:08:44.523 回答
0

Swiper-6.6.2 的解决方案。

只需添加到您不想被“刷卡”“刷卡”的对象的类。然后只需将以下代码添加到您的 js 文件中。

const swiper = new Swiper('.swiper-container', {
    noSwipingClass: 'swiper-no-swiping'
});
于 2021-06-12T01:04:22.873 回答