使用 Ionic 3 如何使幻灯片从末尾开始？答案

【问题标题】：With Ionic 3 How to make the slides start at the end?使用 Ionic 3 如何使幻灯片从末尾开始？
【发布时间】：2017-08-18 17:21:10
【问题描述】：

如果我有 3 张幻灯片，当视图加载时，我想先查看第 3 张幻灯片。从最后开始，而不是从幻灯片 1 开始。

我试过了：

ionViewDidLoad() {
    this.slides.slideTo(3)
}

但它会引发错误：无法读取未定义的属性“长度”

【问题讨论】：

标签： ionic-framework ionic3

【解决方案1】：

目前有一个与此相关的open issue。作为临时解决方法，您可以尝试将该行代码包装在超时内，或使用 ionViewDidEnter 生命周期引擎盖：

ionViewDidEnter() {
    this.slides.slideTo(3, 0); // The 0 will avoid the transition of the slides to be shown
}

或

ionViewDidLoad() {
    setTimeout(() => {
        this.slides.slideTo(3, 0); // The 0 will avoid the transition of the slides to be shown
    }, 300)
}

【讨论】：

即使在超时情况下，最好检查 id slides 是否已定义 - 因为幻数 300 可能不适用于所有设备。您可能希望将其包装在一个函数中，并在睡眠后继续调用该函数，直到定义幻灯片。
是的，您可以在使用幻灯片之前添加一个检查，但问题不是因为没有创建幻灯片（因为定义了this.slides 属性，所以幻灯片组件已经存在）。 300 只是一个数字，目标是使用setTimeout，因为它是由浏览器处理的：调用 setTimeout 将在作为第二个参数传递的时间之后将消息添加到队列中。如果队列中没有其他消息，则立即处理该消息；但是，如果有消息，setTimeout 消息将不得不等待其他消息被处理

【解决方案2】：

有一个initialSlide输入属性[REF]https://ionicframework.com/docs/api/components/slides/Slides/#Input属性

在视图中你可以添加

<ion-slides initialSlide="2">
  <ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 2</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 3</h1>
  </ion-slide>
</ion-slides>

【讨论】：