这几天在写一个b2b的app,然后发现首页轮播图不自动切换,然后各种网上找资料,终于解决了困扰我一生的问题。
home.html
<ion-slides *ngIf="slidess.length > 1" initialSlide="0" loop="true" autoplay="2300" speed="1000">
<ion-slide *ngFor="let item of slidess">
<img [src]="item.original_img" (click)="goDetails(item)"/>
<div class="cover"></div>
<span class="title">{{item.goods_name}}</span>
</ion-slide>
</ion-slides>
这儿划重点:
*ngIf="slidess.length > 1"
判断一下轮播图是否有数据,我一开始没有判断,然后报错了。
其次在TypeScript中需要引入 ViewChild Slides
home.ts
import { Component, ViewChild } from '@angular/core';
import { NavController, IonicPage, App,Slides } from 'ionic-angular';
然后在ts页面中声明:@ViewChild('slides') slides; 并调用startAutoplay
export class HomePage { @ViewChild(Slides) slides: Slides; }
然后就是在ts页面中添加如下两个组件,一个是进入页面时,调用自动播放函数,一个是离开页面时暂停自动播放,这样就完美解决了离开当前页面进入其他页面,然后再返回当前页面是,轮播图就停止轮播的问题。
//进入页面时自动播放
ionViewDidEnter(){
if(this.slidess.length>1){
this.slides.startAutoplay();
}
}
//页面离开时停止自动播放
ionViewDidLeave(){
if(this.slidess.length>1){
this.slides.stopAutoplay();
}
}
注意:调用startAutoplay时我依然判断了轮播图是否有数据,因为不判断会报:startAutoplay is undefield 的错误。具体原因我也不是很清楚。
第一次用ionic3+angular写app项目,很多地方都不懂,希望大家多多指教。