ionic上 轮播图是最坑的插件了吧,各种bug和 问题。
事件也不好用。。
于是,我终于搞出来了一个完美的方案,
适用于,动态获取轮播图数据,自动循环播放,跳转其他页面回来后自动播放,手指触摸后自动播放。
至于有什么问题,还要大家多去试试,话不多说,开搞。
1.在使用轮播图的 page页面 ts文件中
import { Slides } from ‘ionic-angular‘; import { ViewChild } from ‘@angular/core‘;
在class下面添加
@ViewChild(Slides) slides: Slides;
autoPlay() { this.slides.startAutoplay(); } swipeEvent(e){ this.autoPlay(); } ionViewWillLeave() { this.slides.stopAutoplay(); }
在 获取轮播图数据后,新增
this.autoPlay();
2.在page页面
1 <ion-slides #slides pager loop="true" autoplay="2000" autoplayDisableOnInteraction="false" *ngIf=‘carouselImgList.length>0‘ 2 (swipe)="swipeEvent($event)"> 3 <ion-slide *ngFor="let carouselImg of carouselImgList" (click)="goCarouselDetail(carouselImg)"> 4 <img src="{{carouselImg.imgUrl}}" class="slide-image"> 5 </ion-slide> 6 </ion-slides>
这样就可以了,试试后如果有问题可以给我反馈。
原文地址:https://www.cnblogs.com/zwhblog/p/8986551.html
时间: 2024-10-28 16:22:36