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