前言
小编目前的项目需要将前端框架升级到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组件,导致没有成功,事后再打开页面时发现第一个轮播图的效果出来了。果真是考虑问题角度要全面啊。
感谢您的访问!