親愛的程序員童鞋 分享干貨啦
最近在研究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="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>
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);
}
}