ionic2 干货

亲爱的程序员童鞋 分享干货啦

最近在研究ionic2 ,公司也在用ionic2 和typescript，angular2以及cordova做混编APP

我的博客随笔都是随性写的，做了某个功能就想分享一下，可能有些小白看不懂。

废话少说，先上干货

ionic2轮播图(比做网页轮播图简单多了)

home.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="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>

home.ts页面(typescript,有兴趣的童鞋可以了解下)

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);
}
}