Ionic+Angular实现自动轮播功能

Ionic+Angular实现自动轮播功能

html页面

    <section class="shop-swipe" >
    <ion-slides pager="true" loop="true"  speed="5000" pager="true" autoplay="true" spaceBetween="0" direction="vertical" effect="slide"  zoom="true" #slide>
        <ion-slide *ngFor="let item of swipeimgs">
          <div>
            <div>
              <img [src]="item.slidePictureUrl" (click)="onDismiss()">
            </div>
          </div>
        </ion-slide>
    </ion-slides> 
  </section>

ts中

1.引入ViewChild
import { Component, OnInit,ViewChild } from '@angular/core';
import { IonSlides } from '@ionic/angular';
2.
export class HomeTabPage extends UserInfo implements OnInit {
  @ViewChild(IonSlides) slides: IonSlides;
}
3.
 ngOnInit() {
              setInterval(() => {
                  this.slides.startAutoplay();
               }, 3000);
            }
  //进入界面时，轮播图开始          
  ionViewWillEnter() {
    this.slides.startAutoplay();
  }
   // 退出界面时，轮播图停止
   ionViewWillLeave() {
    this.slides.stopAutoplay();
  }
}