ion-slides 增加滑动效果之后ion-slide点击无效的问题

作者：七棵菜日期：2022-11-30 栏目：计算机分类：1 人气：158

经常会用到在ion-slides上添加点击事件的功能，而构建内部ion-slide子组件的方法绝大多数的做法是从接口获取数组，循环显示ion-slide，因此无论是参数还是点击事件都是写到ion-slide.
但是如果应用了一些的滑动效果和样式，有时候发现此点击事件并不能触发，这时候如果再次稍微滑动一下ion-slide，点击事件就可以被触发了，具体原因有待调查，我猜测可能是滑动效果没有完全结束，有一些遮罩层或者层级显示顺序的问题，导致当前`active`的ion-slide并未被点击到。
要想避免此问题，那么应该是将点击事件加到**ion-slides**上，然后在绑定的事件上获取当前选中的索引，进而有下一步的逻辑。

&gt; 关于在循环滑动时获取当前索引的问题，请注意并不是使用`activeIndex`，详情可以参考我的另一篇博客。

点击事件添加到ion-slides的代码可参考如下：

- 模板绑定事件：

```
&lt;ion-slides #mapduoslides id="mapduoslides" pager="true" [options]="slideOpts" (ionSlideTransitionEnd)="show()" (click)="navToSecensCate()"&gt;
          &lt;ion-slide *ngFor="let item of linedata.lines;let idx=index;"&gt;
          &lt;/ion-slide&gt;
        &lt;/ion-slides&gt;
```

- 脚本处理事件

```
@ViewChild('mapduoslides', { static: false }) mapduoslidesDom: any;

/* 绑定滑动过渡效果结束之后需要处理的事件 */
show() {
    this.mapduoslidesDom.getSwiper().then((res) =&gt; {
      this.cursid = res.realIndex;
    });
  }

/* 也可以绑定点击事件 */
/* 但是请注意两者并没有先后顺序，各自处理不能耦合 */
  navToSecensCate() {
    this.mapduoslidesDom.getSwiper().then((res) =&gt; {
      this.cursid = res.realIndex;
  }
```

标签： ion-slides ion-slide

上一篇：Found the synthetic property @showTooltip. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. 下一篇：ion-slides 循环轮播图下标索引值重复问题解决方案

ion-slides 增加滑动效果之后ion-slide点击无效的问题

随便看看

留言