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

Question

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

我已经做到了。我正在努力解决的问题是，我需要使我单击的幻灯片处于选中状态，而较旧的幻灯片未选中，而无需像以下屏幕截图那样滚动到该幻灯片

我可以通过以下我为点击操作注册的片段动态获取点击索引

(ionSlideTouchEnd)="onSlideTap($event)"

然后稍后在代码上我得到了事件

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

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

Answer 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
}