ionic4上的离子幻灯片单击时选择幻灯片

Question

我正在使用离子滑动器，使滑动器具有不同的“可选”标签，如下图所示

我已经做到了。我要努力解决的问题是，我需要将单击的幻灯片制作为选中状态，而未选中的幻灯片则要取消选中，而无需像下面的屏幕截图一样滚动到该幻灯片

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

(ionSlideTouchEnd)="onSlideTap($event)"

然后在代码中我得到了事件

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

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

Answer 1

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

模板

CURRENT_DATE

TS文件

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

样式文件

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);
}