时间戳

首页 > 解决方案 > 单击引导卡内的 swiper.js 图像下一个/上一个按钮时如何停止传播

html - 单击引导卡内的 swiper.js 图像下一个/上一个按钮时如何停止传播

问题描述

我在下面这样的引导卡中使用ngx-swiper-wrapper，顶部有一个 routerlink。因此，如果我单击卡上的任何位置，它将路由。工作正常！但是，如果我在任何滑动图像上滑动/单击左/右，我想停止路由传播。我可以捕捉到事件，但似乎无法弄清楚如何停止事件方法内的传播。

任何帮助，将不胜感激。一个问题是'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>

标签： htmlangulartypescriptswiper.jsngx-swiper-wrapper

解决方案

我还没有找到解决方案，但我做了一个解决方法。

我将 routerlinks 放在不同的 div 上（不是最上面的 div - 引导卡）。

所以我仍然得到相同的结果，现在卡中只有 3 个不同的路由器链接，而不是顶部的 1 个

推荐阅读