ionic3-ng4学习见闻--(轮播图完美方案)

ionic上 轮播图是最坑的插件了吧，各种bug和 问题。

事件也不好用。。

于是，我终于搞出来了一个完美的方案，

适用于，动态获取轮播图数据，自动循环播放，跳转其他页面回来后自动播放，手指触摸后自动播放。

至于有什么问题，还要大家多去试试，话不多说，开搞。

1.在使用轮播图的 page页面 ts文件中

import { Slides } from 'ionic-angular';

import { ViewChild } from '@angular/core';

在class下面添加

@ViewChild(Slides) slides: Slides;

autoPlay() {

    this.slides.startAutoplay();

  }

  swipeEvent(e){

    this.autoPlay();

  }

  ionViewWillLeave() {

    this.slides.stopAutoplay();

  }

在 获取轮播图数据后，新增

this.autoPlay();

2.在page页面

 <ion-slides #slides pager loop="true" autoplay="2000" autoplayDisableOnInteraction="false" *ngIf='carouselImgList.length>0'

     (swipe)="swipeEvent($event)">

     <ion-slide *ngFor="let carouselImg of carouselImgList" (click)="goCarouselDetail(carouselImg)">

       <img src="{{carouselImg.imgUrl}}" class="slide-image">

     </ion-slide>

   </ion-slides>

这样就可以了，试试后如果有问题可以给我反馈。