ion-slides 循环轮播图下标索引值重复问题解决方案

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

ion-slides 底层是调用的 **swiper**，因此此问题实际上是 **swiper** 设置循环滚动后，获得当前索引不准确的问题。

&gt; 使用`realIndex`代替`activeIndex`

如下代码可以获得当前索引：

`html`标签监听滑动结束事件`ionSlideTransitionEnd`

```
&lt;ion-slides #mapduoslides id="mapduoslides" pager="true" [options]="slideOpts" (ionSlideTransitionEnd)="tend()" (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;

tend() {
    this.mapduoslidesDom.getActiveIndex().then((id) =&gt; {
      // 在设置循环播放时，此处的id并不一定是实际看到的图片的索引
	  // 因为配置循环播放时，首尾的元素会被复制，因此，可能出现重复值得问题
	  console.warn(id); // [test]
    });
  }
```

准确的写法：获取`swiper`实例，调用`realIndex`方法

```
this.map3slidesDom.getSwiper().then((res) =&gt; {
      console.warn(res.realIndex); // [test]
    });
```

#### 鸣谢

- [韩大璐](https://blog.csdn.net/weixin_41257563/article/details/82425790)
- [林景之](https://www.cnblogs.com/linjiangxian/p/12676531.html)

标签： ionic5 ion-slides swiper

上一篇：Found the synthetic property @showTooltip. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. 下一篇：thinkphp5+ 多对多关系模型根据中间表字段排序

ion-slides 循环轮播图下标索引值重复问题解决方案

随便看看

留言