ionic3中ion-slides切换页面返回后自动轮播startAutoplay()

很多同学会发现在ionic3中页面切换返回后轮播图就不动了,下面我们看看ionic3中ion-slides切换页面返回后自动轮播问题。


1.首先HTML中定义一个 #slides

  <ion-slides #slides *ngIf="focusList.length>0" class="focus" pager  loop="true" autoplay="3000">    
      <ion-slide *ngFor="let item of focusList">
          <img [src]="config.apiUrl+item.pic" />
      </ion-slide>         
   </ion-slides>


2.其次在TypeScript中需要引入 ViewChild  Slides  :


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

3.再次在页面中声明:@ViewChild('slides')  slides; 并调用startAutoplay


自动播放的Slides调转到其他页面一定时间后(超过设置的播放时间),再回到此页面,自动播放失效,解决方法如下:


class MyPage {
  @ViewChild('slides ') slides: Slides;


        //页面进入时启动自动播放
    ionViewDidEnter(){
          this.slides.startAutoplay();
    }


    //页面离开时停止自动播放


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


}