代码之家 › 专栏 › 技术社区 › chuckd

单击引导卡中的swiper.js image next/prev按钮时如何停止传播

ngx-swiper-wrapper swiper.js typescript angular html

0

chuckd · 技术社区 · 5 年前

我正在使用 ngx-swiper-wrapper 但是,如果我在任何刷卡器图像上滑动/单击左/右,我想停止传播路由。

任何帮助都将不胜感激。一个问题是'onIndexChange()'中的$event只是索引号,因此我无法从该索引号开始工作,与onSwiperEvent()相同,我传入的$event是一个空数组。

preventClicksPropagation: true,
touchMoveStopPropagation: true

<div class="card" [routerLink]="['/events', event.id]">
  <swiper [config]="eventsSwiperConfig" [(index)]="index" (indexChange)="onIndexChange($event)" (swiperTransitionStart)="onSwiperEvent($event)"></swiper>
  <ng-container *ngFor="let photo of event.photoUrl">
    <div class="outer-img-container">
      <div class="img-container">
        <img class="card-img swiper-lazy" src="{{photo}}">
        <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
      </div>
    </div>
  </ng-container>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

1 回复 | 直到 5 年前

1

0

chuckd 5 年前

我还没有找到解决办法,但我做了一个变通办法。

我把RouterLink放在不同的div上(不是最上面的div-bootstrap卡)。

所以我还是得到了同样的结果,现在卡中只有3个不同的路由链接,而不是顶部的1个