開(kāi)發(fā)需求,需要定制ion-slides,關(guān)于ion-slides滾動(dòng)時(shí)或滑動(dòng)時(shí),樣式的話,通過(guò)修改ion-slides自身的css樣式能達(dá)到基本的效果,比如下圖,在顯示的時(shí)候圖片是放大,在切換的過(guò)程中是縮小的
ion-slides.gif
下面簡(jiǎn)單講一下如何開(kāi)發(fā) ion-slides
首先 引入ion-slides
<ion-slides pager="true" effect="slide" autoplay="5000" loop=true #topSlide (click)="onClickSlides()">
<ion-slide *ngFor="let item of slidesItems">
<img src="{{item.img}}" class="slide-image">
</ion-slide>
</ion-slides>
獲取 ion-slides對(duì)象:
@ViewChild("topSlide") topSliders: Slides;
初始化ion-slides中slidesItems的數(shù)據(jù),無(wú)論是網(wǎng)絡(luò)請(qǐng)求還是本地,在ionViewDidLoad()中初始化
initSlides() {
this.slidesItems = [
{ img: "assets/imgs/pic01.png" },
{ img: "assets/imgs/pic02.png" },
{ img: "assets/imgs/pic03.png" },
{ img: "assets/imgs/pic04.png" },
{ img: "assets/imgs/pic05.png" }
];
if (this.topSliders) {
//防止輪播圖停止
this.topSliders.autoplayDisableOnInteraction = false;
}
}
目前基本完成,但是很多情況下,比如下面的tab切換或者子頁(yè)面回到主頁(yè)面,ion-slides又停止了,我摸索出結(jié)果,tab切換和子頁(yè)面回主頁(yè)面,走的ionic的頁(yè)面生命周期不一樣,所以在離開(kāi)的時(shí)候停止play,在對(duì)應(yīng)的生命周期恢復(fù)的時(shí)候,開(kāi)始play
// 當(dāng)進(jìn)入頁(yè)面時(shí)觸發(fā)
ionViewDidEnter() {
console.log("ionViewDidEnter HomePage");
if (this.topSliders) {
this.topSliders.startAutoplay();
}
}
ionViewWillEnter() {
console.log("ionViewWillEnter HomePage");
this.topSliders.startAutoplay();
}
ionViewCanLeave() {
if (this.topSliders) {
this.topSliders.stopAutoplay();
}
}
ionViewWillLeave() {
console.log("ionViewWillLeave HomePage");
if (this.topSliders) {
this.topSliders.stopAutoplay();
}
}
基本能解決,切換頁(yè)面ion-slides不播放的問(wèn)題
