ionic开发的过程中遇到的问题及解决方法的整理（一）——轮播失效问题

ionic 轮播无效问题

---

###1.slides轮播图手动滑动后无法自动播放问题

在轮播所在的ts文件中引入ViewChild，Slides

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

之后通过@ViewChild匹配到组件 Slides元素

 @ViewChild(Slides) slides: Slides;

最后在ionViewDidEnte生命周期里设置该参数 autoplayDisableOnInteraction 为false

ionViewDidEnter() {
    this.slides.autoplayDisableOnInteraction = false;
  }

2.ion-slides切换页面返回后轮播失效问题

自动播放的Slides调转到其他页面一定时间后（超过设置的播放时间），再回到此页面，自动播放失效。所以可以在离开页面时停止自动播放，再次进入时再次启动。

同样首先在轮播所在的ts文件中引入ViewChild，Slides，并通过@ViewChild匹配到组件 Slides元素

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

 @ViewChild(Slides) slides: Slides;

之后在进入页面时用 ionViewDidEnter生命周期启动轮播

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

最后在离开页面时调用ionViewDidLeave生命周期停止轮播

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