【ionic4】Slides 自动轮播

解决Ionic4 轮播图手动滑动后不自动轮播问题
一、
#slide01给ion-slides定义一个唯一的id 并监听 “ionSlideTouchEnd()”

  <ion-slides pager="true"  [options]="slidesOpts"  #slide01  (ionSlideTouchEnd)= "slideTouchEnd()">
    <ion-slide class="ion_slide" *ngFor="let item of slidesList">
     <img [src]="item.pic">
    </ion-slide>

二、

引入ViewChild，并获取dom节点
三、
ionSlideTouchEnd后触发slideDidChange，在slideDidChange方法中调用slide对象进行轮播

  // 手动滑动结束时，图片开启自动轮播
  slideTouchEnd() {
    this.slides01.startAutoplay();
  }

完整代码:

import {Component, OnInit, ViewChild} from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements  OnInit {

  @ViewChild('slides01') slides01;

  // 轮播图样式、自动轮播
    slidesOpts = {
    speed: 400,
    autoplay: {
      delay: 400,
    },
    loop: true
  };

  public slidesList: any[] = [];

  constructor() {
    for (let i = 0; i <= 3; i++) {
      this.slidesList.push({
        pic: '/assets/icon/slides0' + i + '.jpg',
        url: '',
      });
    }

  }
  ngOnInit() {
  }
  // 手动滑动结束时，图片开启自动轮播
  slideTouchEnd() {
    this.slides01.startAutoplay();
  }
}