【前端】Ionic 4 轮播图自动播放功能

前言

    小编目前的项目需要将前端框架升级到ionic4，同时遇到了将广播消息进行轮播展示的功能需求，在ionic官网查找和博客的指引下，小编最终实现了这个功能效果。

HTML使用Ion-slides组件

    具体使用如下 ，其中click事件写在了P标签中，ion-slide标签中不能响应click事件。  

<ion-slides pager >
    <ion-slide class="mySlide" *ngIf='isChoujiang'>
        <p (click)="goToLotteryPage()">当前 {{chanceNumber}}{{chanceName}}</p>
    </ion-slide>
    <ion-slide class="mySlide" *ngIf='isActivity'>
        <p (click)="queryUserTicket()">当前活动：{{activityName}}</p>
    </ion-slide>
    <ion-slide class="mySlide" *ngIf='isRedpacket'>
        <p (click)="open()">请收取 {{activityName}} 红包</p>
    </ion-slide>
    <ion-slide class="mySlide" *ngIf='isNoMessage'>
        <p>当前没有消息</p>
    </ion-slide>
</ion-slides>

 

TS引用模板以及方法

    一、引用Slides

   1.ionic3的引用   

import { Slides } from 'ionic/angular';

export class HomePage extends BaseUI implements OnInit {
  @ViewChild(Slides) slides: Slides;
  ....

}

    2.ionic4的引用，名字发生了变化    

import { IonSlides } from '@ionic/angular';

export class HomePage extends BaseUI implements OnInit {
  @ViewChild(IonSlides) slides: IonSlides;
  ....

}

    二、方法   

  // 界面重新进入时，轮播图自动播放
  ionViewWillEnter() {    
    this.slides.startAutoplay();

  }
  // 退出界面时，轮播图停止
  ionViewWillLeave() {
    this.slides.stopAutoplay();
  }

手动滑动后轮播图不自动播放

 下拉刷新中重新启动轮播图

  一、HTML中的下拉刷组件

<ion-content class="contentback">

    <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">

        <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉刷新页面" refreshingSpinner="circles"

            refreshingText="加载中...">

        </ion-refresher-content>

    </ion-refresher>

</ion-content>

二、TS中方法

// 下拉刷新页面

  doRefresh(event: any) {   
    this.ngOnInit(); 

    this.slides.stopAutoplay();

    this.slides.startAutoplay();

    setTimeout(() => {

      event.target.complete();

    }, 1000);

  }

小结

    小编在实现轮播效果时，一个页面中使用了两个ion-slides组件，它只能识别第一个组件，所以设置的过程中，自己设置的是第二个ion-slides组件，导致没有成功，事后再打开页面时发现第一个轮播图的效果出来了。果真是考虑问题角度要全面啊。

                                                                                     感谢您的访问！