ionic2 + cordova 应用-轮播图

10.1 轮播图官方文档（欢迎加入Q群一起学习讨论657185219）

10.2 使用html

 

<ion-header>

  <ion-navbar>
    <ion-title>slide-pic-demo</ion-title>
  </ion-navbar>

</ion-header>
<ion-content padding class="page-home">
  <ion-slides #mySlider  (ionSlideDidChange)="slideChanged()">
    <ion-slide *ngFor="let i of iterms">
      <img src="{{i}}" >
    </ion-slide>

  </ion-slides>
</ion-content>

 ion-slides 标签就是我们的轮播组件， #mySlider组件对象ionSlideDidChange 表示每次轮播的回调事件

10.2 使用ts

 

import {Component,ViewChild} from '@angular/core';
import {NavController,Slides} from 'ionic-angular';


@Component({
  templateUrl: 'slide-pic-demo.html'
})
export class SlidePicDemoPage {

  @ViewChild('mySlider') sliders:Slides;

 iterms = [
   "http://img3.imgtn.bdimg.com/it/u=1373023650,1548952065&fm=26&gp=0.jpg",
   "http://www.quanjing.com/image/2016index/slt3.jpg",
   "http://www.quanjing.com/image/2016index/f1.jpg"
 ];

  constructor(public navCtrl: NavController) {

  }

  ngOnInit(){//页面加载完成后自己调用
    //If true, show the pager.
    //能够显示下面的page的小点点
    this.sliders.pager = true;
    //If true, continuously loop from the last slide to the first slide.
    //参照官网这个属性表示轮播图能够循环
    this.sliders.loop = true;
    setInterval(()=>{
        //1000:表示速度，true表示能够触发事件
        this.sliders.slideNext(1000,true);
    },2000);
  }
  //轮播的时候触发的事件
  slideChanged () {
    let currentIndex = this.sliders.getActiveIndex();
    console.log('Current index is', currentIndex);
  }

}

 效果如下

 
 

10.3 补充

 轮播图这样是可以正常播放，但是会出现一个问题，当页面跳转到其他页面再回来的时候轮播图就不自动播放了，解决方案如下。

 this.sliders.loop = true;
 // 自定义播放的间隔，取消定时任务
 this.sliders.autoplay = 1000;
// 自定义播放的速度
this.sliders.speed = 1000;

// 进入的时候自动播放
  ionViewWillEnter() {
    this.sliders.startAutoplay();
  }
// 离开的时候暂停
  ionViewWillLeave() {
    this.sliders.stopAutoplay();
  }