相关html
<ion-slides pager (ionSlideTap)="clickItem()" (ionSlideDidChange)="slideChange()" (ionSlidePrevEnd)="preChange()" (ionSlideNextEnd)="nextChange()">
<ion-slide style="background-color: green">
<h2>Slide 1</h2>
</ion-slide>
<ion-slide style="background-color: blue">
<h2>Slide 2</h2>
</ion-slide>
<ion-slide style="background-color: red">
<h2>Slide 3</h2>
</ion-slide>
</ion-slides>
ionSlideDidChange 滑动得时候
ionSlidePrevEnd 往左滑动得时候
ionSlideNextEnd 往右滑动的时候
ionSlideTap 点击轮播图的时候
相关js
import { ViewChild } from '@angular/core';
import {Slides } from 'ionic-angular';
@ViewChild(Slides) slides:Slides;
clickItem(){
this.clickIndex = this.slides.realIndex; //点击的索引
console.log(this.clickIndex)
this.index = this.slides.getActiveIndex() //点击当前索引
console.log(this.index)
this.preIndex = this.slides.getPreviousIndex() //获得前一个索引
console.log(this.preIndex)
this.length = this.slides.length() //获得slide长度
console.log(this.length)
this.end = this.slides.isEnd() //判断是否是最后一个
console.log(this.end)
this.begin = this.slides.isBeginning() //判断是否是第一个
console.log(this.begin)
}
slideChange(){
// alert(1)
}
preChange(){
this.begin = this.slides.isBeginning() //判断是否是第一个
console.log(this.begin)
if(this.begin){
alert('前面没有了')
}else{
alert('-')
}
}
nextChange(){
this.end = this.slides.isEnd() //判断是否事最后一个
console.log(this.end)
if(this.end){
alert('后面没有了')
}else{
alert('+')
}
}
相关知识点
1、initialSlide :初始的滑动数。 默认:0
2、direction :滑动的方向。vertical || horizontal 默认:horizontal
3、loop :是否可以循环滑动 默认:false
4、autoplay :是否自动播放 默认:false
5、pager :是否显示页数小点点 默认:false
6、speed :幻灯片过度的毫秒数 默认:300ms
方法
this.mySlide.getActiveIndex() :获取当前幻灯片的索引。
this.mySlide.getPreviousIndex() :获取上一个幻灯片的索引。
this.mySlide.length() :获取幻灯片的总数。
this.mySlide.isEnd() :判断幻灯片是否是最后一个。
this.mySlide.isBeginning() :判断幻灯片是否是第一个。
this.mySlide.getSlider() :返回一个 Object 也就是该幻灯片的实例。