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();
}