ionic3-ng4学习见闻--(轮播图完美方案)

Posted 2020-11-02 赵皖华

ionic上 轮播图是最坑的插件了吧，各种bug和 问题。

事件也不好用。。

于是，我终于搞出来了一个完美的方案，

适用于，动态获取轮播图数据，自动循环播放，跳转其他页面回来后自动播放，手指触摸后自动播放。

至于有什么问题，还要大家多去试试，话不多说，开搞。

1.在使用轮播图的 page页面 ts文件中

import { Slides } from ‘ionic-angular‘;
import { ViewChild } from ‘@angular/core‘;

View Code

在class下面添加

@ViewChild(Slides) slides: Slides;

View Code

autoPlay() {
    this.slides.startAutoplay();
  }

  swipeEvent(e){
    this.autoPlay();
  }


  ionViewWillLeave() {
    this.slides.stopAutoplay();
  }

View Code

在 获取轮播图数据后，新增

this.autoPlay();

View Code

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>

View Code

 

这样就可以了，试试后如果有问题可以给我反馈。