IONIC2/3 ion-slide 踩坑指南

1.动态生成 ion-slide 报错 

原因:页面渲染完成时,接口尚未完成取值,所以页面的 banners 为 undefined

解决方案

html:

<ion-slides *ngIf="banners?.length > 1" autoplay="4000" loop="true" class="height-200">

      <ion-slide*ngFor="let banner of banners">

        <img style="width:100%"  [src]="FILE_SERVE_URL+banner.imgUrl">

      </ion-slide>

    </ion-slides>

2.手动出发ion-slide 滚动后 autoplay 属性失效

加上:this.slides.autoplayDisableOnInteraction = false; 即可

如果是从接口获取的slide,则需要加一个setTimeout()方法延时调用该属性,否则会报错slides is not define

3.切换页面时导致轮播失效

ionViewDidEnter()中加上:this.slides.startAutoplay();

ionViewWillLeave()中加上:this.slides.stopAutoplay();

如果是接口获取的slide,同上添加setTimeout()方法延时加载