开发需求,需要定制ion-slides,关于ion-slides滚动时或滑动时,样式的话,通过修改ion-slides自身的css样式能达到基本的效果,比如下图,在显示的时候图片是放大,在切换的过程中是缩小的
ion-slides.gif
下面简单讲一下如何开发 ion-slides
首先 引入ion-slides
<ion-slides pager="true" effect="slide" autoplay="5000" loop=true #topSlide (click)="onClickSlides()">
<ion-slide *ngFor="let item of slidesItems">
<img src="{{item.img}}" class="slide-image">
</ion-slide>
</ion-slides>
获取 ion-slides对象:
@ViewChild("topSlide") topSliders: Slides;
初始化ion-slides中slidesItems的数据,无论是网络请求还是本地,在ionViewDidLoad()中初始化
initSlides() {
this.slidesItems = [
{ img: "assets/imgs/pic01.png" },
{ img: "assets/imgs/pic02.png" },
{ img: "assets/imgs/pic03.png" },
{ img: "assets/imgs/pic04.png" },
{ img: "assets/imgs/pic05.png" }
];
if (this.topSliders) {
//防止轮播图停止
this.topSliders.autoplayDisableOnInteraction = false;
}
}
目前基本完成,但是很多情况下,比如下面的tab切换或者子页面回到主页面,ion-slides又停止了,我摸索出结果,tab切换和子页面回主页面,走的ionic的页面生命周期不一样,所以在离开的时候停止play,在对应的生命周期恢复的时候,开始play
// 当进入页面时触发
ionViewDidEnter() {
console.log("ionViewDidEnter HomePage");
if (this.topSliders) {
this.topSliders.startAutoplay();
}
}
ionViewWillEnter() {
console.log("ionViewWillEnter HomePage");
this.topSliders.startAutoplay();
}
ionViewCanLeave() {
if (this.topSliders) {
this.topSliders.stopAutoplay();
}
}
ionViewWillLeave() {
console.log("ionViewWillLeave HomePage");
if (this.topSliders) {
this.topSliders.stopAutoplay();
}
}
基本能解决,切换页面ion-slides不播放的问题
