Ionic5 ion-slide点击按钮跳转到指定slide的实现方法 支持按id跳转吗

直接按序号跳转指定slide #

完全可以实现，Ionic5的ion-slides组件原生提供了跳转方法，具体实现步骤：

• 第一步：给模板中的ion-slides添加模板引用变量

<ion-content>
  <!-- 新增#slides模板引用标记 -->
  <ion-slides #slides>
    <ion-slide *ngFor="let d of data">
      <ion-grid>
        <ion-row class="contents">
          <ion-col class="no">{{d.index}}</ion-col>
          <ion-col class="title">{{d.title}}</ion-col>
        </ion-row>
      </ion-grid>
    </ion-slide>
  </ion-slides>

  <!-- 测试跳转按钮示例 -->
  <ion-button (click)="goToSlide(9)">跳转到第10个slide</ion-button>
</ion-content>

• 第二步：在组件类中获取ion-slides实例，调用slideTo方法

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

@Component({
  // 你的组件原有配置
})
export class YourPage {
  // 获取ion-slides实例
  @ViewChild('slides') slides: IonSlides;

  /**
   * 跳转到指定序号slide
   * @param targetIndex 目标slide索引，注意索引从0开始计数
   */
  async goToSlide(targetIndex: number) {
    // slideTo参数说明：目标索引、动画时长(单位毫秒，可选默认300)、是否触发回调(可选默认true)
    await this.slides.slideTo(targetIndex, 500);
  }
}

注意：slide的索引从0开始，你要跳第10个slide，传入的参数为9即可。

按id属性跳转对应slide #

原生没有直接按id跳转的API，但可以简单封装实现，步骤：

• 第一步：给ion-slide绑定自定义id

<!-- 示例绑定id规则，可根据自己的业务自定义id格式 -->
<ion-slide *ngFor="let d of data" [id]="'slide-' + d.id">
  <!-- 原有slide内容 -->
</ion-slide>

• 第二步：组件中添加按id跳转的方法，先查询对应id的slide索引再跳转

async goToSlideById(slideId: string) {
  // 获取所有slide元素
  const slides = await this.slides.getSlides();
  // 查找对应id的slide的索引
  const targetIndex = slides.findIndex(slide => slide.id === slideId);
  if(targetIndex > -1) {
    await this.slides.slideTo(targetIndex, 500);
  }
}

使用时直接调用this.goToSlideById('slide-xxx')即可跳转到对应id的slide。

注意事项 #

• 不要在页面未完成渲染时调用跳转方法，建议在ionViewDidEnter生命周期钩子之后调用，避免找不到ion-slides实例
• 如果slide是动态渲染的，要确保渲染完成后再调用跳转方法，也可以监听ionSlidesDidLoad事件确认加载完成后再执行跳转逻辑

内容的提问来源于stack exchange，提问作者김세림