ionic3 sliders轮播图相关知识点

相关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 也就是该幻灯片的实例。