[Angular/Ionic]ionic3中ion-slides

开发需求,需要定制ion-slides,关于ion-slides滚动时或滑动时,样式的话,通过修改ion-slides自身的css样式能达到基本的效果,比如下图,在显示的时候图片是放大,在切换的过程中是缩小的

下面简单讲一下如何开发 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不播放的问题