Ionic Slider切换标签页后如何默认显示第一页

这个问题其实是因为Ionic标签页默认会缓存页面组件，当你切换到其他标签再回来时，About页的幻灯片组件状态被保留了，所以停在最后一张。咱们可以通过页面生命周期钩子来重置幻灯片状态，具体步骤如下：

1. 在About页面组件中获取幻灯片实例 #

首先在about.ts里，需要引入ViewChild和Slides，然后通过@ViewChild获取到<ion-slides>的实例：

import { Component, ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {
  // 获取ion-slides实例
  @ViewChild(Slides) slides: Slides;
  // 这里替换成你实际的幻灯片数据数组
  slideData = [/* 你的幻灯片内容数据 */];

  constructor() { }
}

2. 利用页面生命周期钩子重置幻灯片 #

Ionic提供了ionViewWillEnter钩子，这个方法会在页面即将成为活动页面时触发，刚好适合在这里重置幻灯片到第一张：

ionViewWillEnter() {
  // 重置幻灯片到第0位（也就是第一张），第二个参数是动画时长，设为0可以无动画跳转
  this.slides.slideTo(0, 0);
}

3. 确保你的about.html结构完整 #

结合你提供的代码，补充完整后的HTML可以是这样（假设你用*ngFor循环渲染幻灯片）：

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      <div text-center>Bantuan</div>
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="tutorial-page">
  <ion-slides pager>
    <ion-slide *ngFor="let item of slideData">
      <!-- 这里放置你的单张幻灯片内容，比如图片、文字等 -->
      <h2>{{item.title}}</h2>
      <p>{{item.description}}</p>
    </ion-slide>
  </ion-slides>
</ion-content>

这样修改后，每次你切换回About标签页时，幻灯片都会自动回到第一张啦～

内容的提问来源于stack exchange，提问作者Ilham Bagoes T.