4

我正在尝试构建两个滑块，当触发鼠标滚轮事件时，它们将水平滚动（相反方向）。

正如您在此处看到的，使用具有以下配置的 Swiper API 非常容易：

var swiper = new Swiper('.row-top', {
    freeMode: true,
    slidesPerView: 4,
    preloadImages: true,
    lazy: true,
    loop: true,
    mousewheel: {
        invert: true,
        eventsTarget: 'body'
    },
});
var swiper = new Swiper('.row-bottom', {
    freeMode: true,
    slidesPerView: 4,
    preloadImages: true,
    lazy: true,
    loop: true,
    mousewheel: {
        invert: false,  
        eventsTarget: 'body'
    },
});

正如您在这里看到的那样，它就像一个魅力： https ://jsfiddle.net/sx0mc9po/

我使用鼠标滚轮选项eventsTarget: 'body'，以便在页面上的任何位置触发滚动事件。

在 Angular 中，我使用ngx-swiper-wrapperas 指令，并且 Swiper 工作正常：

<div class="swiper-controller">
    <div  class="swiper-container row-top" [swiper]="configTop">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
        </div>
    </div>

    <div  class="swiper-container row-bottom" [swiper]="configBottom">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
        </div>
    </div>
</div>

配置与上面提到的相同。但是 Angular 完全忽略了这个选项

mousewheel: {
    ... 
    eventsTarget: 'body'
},

我的鼠标指针必须悬停在滑动容器上，否则它不会滚动任何容器。由于有两个 swiper-container 它只滚动一个。

我不确定这是一个错误还是 Angular 不允许body从这个组件中放置一个监听器。如果是这样，有什么解决方法还是我错过了什么？

4

0 回答 0