轮播图-手动和自动的实现方式

在轮播图这里，手动和自动是两种不同的实现方法，

 <!-- 轮播图实现html -->
 <!-- 自动播放的实现 -->
 <ion-slides 
    pager="true"
    #slide1
    [options]="slidesOpts"
    (ionSlideTouchEnd)="startAutoplay()">
       <ion-slide *ngFor="let item of listSlides">
          <img [src]="item.pic" />
       </ion-slide>
  </ion-slides>

// 引入viewChild
import { Component, ViewChild } from "@angular/core";
// 自动播放的速度设置
export class Tab1Page {
  @ViewChild("slide1") slide1;
  public slidesOpts = {
    speed: 400,
    autoplay: {
    delay: 2000
    },
    loop: true
  };
  // 轮播图片
  public listSlides: any[] = [];
  constructor(public navController: NavController) {
    // 循环三张轮播图片
    for (let i = 1; i <= 3; i++) {
      this.listSlides.push({
        pic: "assets/slide0" + i + ".png",
        url: ""
      });
    } 
  // 手动滑动后实现自动轮播
  startAutoplay() {
    this.slide1.startAutoplay();
  }

这部分关键在于在手动滑动后在进行自动轮播，不影响自动和手动的进行，这里引入了viewChild模块，组件有一个startAutoplay（）的方法，所以在手动播放后，直接调用这个方法即可。