ionic4 上的 ion-slides 单击时选择幻灯片

【问题标题】：ion-slides on ionic4 select slide on clickionic4 上的 ion-slides 单击时选择幻灯片
【发布时间】：2020-03-05 15:29:26
【问题描述】：

我正在使用 ion-slides 来制作一个带有不同“可选”标签的滑块，如下图

我已经做到了。我正在努力解决的一点是，我需要让我点击的幻灯片被选中，而较旧的幻灯片被取消选中，而无需像下面的截图一样滚动到该幻灯片

我可以通过下面的 sn-p 动态获取点击的索引我注册了点击操作

(ionSlideTouchEnd)="onSlideTap($event)"

然后在代码上我得到事件

  onSlideTap(event) {
    this.slides.getSwiper().then(swiper => {
      console.log("clicked Index = ", swiper.clickedIndex);
    });
  }

有人知道如何在不滚动的情况下更改活动幻灯片吗？

【问题讨论】：

标签： ionic4 swiper ion-slides

【解决方案1】：

我有个主意。希望对你有帮助。

模板

<ion-slides #slides (ionSlideTouchEnd)=ionSlideTouchEnd($event)>
    <ion-slide class="slide-item" *ngFor="let item of items; index as index;" (click)="onClickSlide(index)">
        <ion-button [ngClass]="{'active': activeIndex === index}">{{item.title}}</ion-button>
    </ion-slide>
</ion-slides>

TS 文件

import { IonSlides } from '@ionic/angular';

...

@ViewChild('slides', { read: IonSlides }) slides: IonSlides;

activeIndex: number = 0;
items = [
    {
      id: 1,
      title: 'Item 1'
    },
    {
      id: 2,
      title: 'Item 2'
    },
    {
      id: 3,
      title: 'Item 3'
    }
];

...

onClickSlide(id) {
    this.activeIndex = id;
}

// Emitted when the user releases the touch.
ionSlideTouchEnd(){
    // Lock the ability to slide to the next or previous slide.
    this.slides.lockSwipes(true);
}

样式文件

.active {
   // style to detect the active slide
}

【讨论】：