ionic slides 填坑

以下解决三个BUG，原因和代码如下

 

HTML

1 <!-- ngIf 解决 页面初始化完成后但 slides 没有初始化的问题 -->
2 <ion-slides #slides (ionSlideWillChange)="slideChange($event)" *ngIf="banners.length > 0" autoplay="2000" loop="true" pager="true">
3   <ion-slide *ngFor="let banner of banners">
4     <!-- slide 里面只能用 img 标签，否则切换第二张图的时候会快速从第三章切换到第二张 -->
5     <img (click)="openUrl(banner.url)" src="{{banner.imageUrl}}" alt="{{banner.title}}" />
6   </ion-slide>
7 </ion-slides>

 

TypeScript

 1 @ViewChild('slides') slides: Slides;
 2 
 3 /**
 4  * 切换到其他页面，再返回到 slides 页面，slides 会停止自动播放
 5 */
 6 ionViewWillEnter() {
 7   if (this.slides) {
 8     // 手动播放到下一张
 9     this.slides.slideTo(this.slides.getActiveIndex() >= this.slides.length() - 1 ? 0 : this.slides.getActiveIndex() + 1);
10     // 开启自动播放，必须先手动播放自动播放才生效
11     this.slides.startAutoplay();
12   }
13 }
14 
15 /**
16  * autoplayDisableOnInteraction 手动切换 slide 会停止自动播放，且 html 中设置此参数无效。
17  * 所以绑定 slideChange 事件设置
18 */
19 slideChange(slides: Slides) {
20   slides.autoplayDisableOnInteraction = false;
21 }

 

转载于:https://www.cnblogs.com/yutian130/p/8404336.html