ionic3-ng4學習見聞--(輪播圖完美方案)

ionic上 輪播圖是最坑的插件了吧，各類bug和 問題。

事件也很差用。。

因而，我終於搞出來了一個完美的方案，

適用於，動態獲取輪播圖數據，自動循環播放，跳轉其餘頁面回來後自動播放，手指觸摸後自動播放。

至於有什麼問題，還要你們多去試試，話很少說，開搞。

1.在使用輪播圖的 page頁面 ts文件中

import { Slides } from 'ionic-angular';
import { ViewChild } from '@angular/core';

View Code

在class下面添加

@ViewChild(Slides) slides: Slides;

View Code

autoPlay() {
    this.slides.startAutoplay();
  }

  swipeEvent(e){
    this.autoPlay();
  }


  ionViewWillLeave() {
    this.slides.stopAutoplay();
  }

View Code

在 獲取輪播圖數據後，新增

this.autoPlay();

View Code

2.在page頁面

1 <ion-slides #slides pager loop="true" autoplay="2000" autoplayDisableOnInteraction="false" *ngIf='carouselImgList.length>0'
2     (swipe)="swipeEvent($event)">
3     <ion-slide *ngFor="let carouselImg of carouselImgList" (click)="goCarouselDetail(carouselImg)">
4       <img src="{{carouselImg.imgUrl}}" class="slide-image">
5     </ion-slide>
6   </ion-slides>

View Code

 

這樣就能夠了，試試後若是有問題能夠給我反饋。