ionic2 轮播图

页面中的HTML文档

-------------------------------------------------------

<ion-header >

<ion-navbar>
<ion-title>主页</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="presentPopover($event)">
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding class="page-home">
<ion-slides #mySlider [options]="mySlideOptions" style="width:100%;height:200px">
<ion-slide>
<img src="../../assets/img/1.jpg" >
</ion-slide>
<ion-slide>
<img src="../../assets/img/2.jpg" >
</ion-slide>
<ion-slide>
<img src="../../assets/img/3.jpg" >
</ion-slide>
<ion-slide>
<img src="../../assets/img/4.jpg" >
</ion-slide>
</ion-slides>

</ion-content>

-----------------------------------------------------------

在ts页面中的设置

--------------------------------------------------------

import { Component ,ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';//注入轮播
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
@ViewChild('mySlider') slider:Slides;
mySlideOptions={
autoplay:2000,
initialSlide:0,
pager:true,
loop:true,
speed:300
};
constructor( ) {
}
ngOnInit(){//页面加载完成后自己调用
setInterval(()=>{
this.slider.slideNext(300,true);
},2000);
}
}