ionic slides 填坑

以下解决三个BUG，原因和代码如下

 

HTML

<!-- ngIf 解决 页面初始化完成后但 slides 没有初始化的问题 -->
<ion-slides #slides (ionSlideWillChange)="slideChange($event)" *ngIf="banners.length > 0" autoplay="2000" loop="true" pager="true">
  <ion-slide *ngFor="let banner of banners">
    <!-- slide 里面只能用 img 标签，否则切换第二张图的时候会快速从第三章切换到第二张 -->
    <img (click)="openUrl(banner.url)" src="{{banner.imageUrl}}" alt="{{banner.title}}" />
  </ion-slide>
</ion-slides>

 

TypeScript

@ViewChild('slides') slides: Slides;

/**
 * 切换到其他页面，再返回到 slides 页面，slides 会停止自动播放
*/
ionViewWillEnter() {
  if (this.slides) {
    // 手动播放到下一张
    this.slides.slideTo(this.slides.getActiveIndex() >= this.slides.length() - 1 ? 0 : this.slides.getActiveIndex() + 1);
    // 开启自动播放，必须先手动播放自动播放才生效
    this.slides.startAutoplay();
  }
}

/**
 * autoplayDisableOnInteraction 手动切换 slide 会停止自动播放，且 html 中设置此参数无效。
 * 所以绑定 slideChange 事件设置
*/
slideChange(slides: Slides) {
  slides.autoplayDisableOnInteraction = false;
}