Ionic2 slides的使用

<ion-slides pager>

  <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>

上面是一段非常简单的<ion-slides>的使用，很简单<ion-slides>里面嵌套n个<ion-slide>.

---

假设我们在一个@Component中已经添加下面的模板：

<ion-slides>
  <ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 2</h1>
  </ion-slide>
</ion-slides>

之后你可以在某个页面的class中使用@ViewChild（）去分配Slides到该函数的slides属性中。现在我们就可以调用Slides中任何方法了。比如我们可以使用slideTo()方法导航到一个定义好的button按钮。之后我们调用goToSlide()方法和导航到第三个滑动页。

import { ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';
//引入Slides模块
class MyPage {
  @ViewChild(Slides) slides: Slides;
  //在目标子页面中注入Slides模块
  goToSlide() { //滑动方法，
    this.slides.slideTo(2, 500);//第三个，500毫秒。
  }
}

我们也可以增加事件到<ion-sliders>元素上，比如我们现在添加一个ionSlideDidChange事件。
<ion-slides (ionSlideDidChange)="slideChanged()">

后面我们来定义slideChanged()这个触发函数：

 slideChanged() {
    let currentIndex = this.slides.getActiveIndex();
    console.log("Current index is", currentIndex);
  }

<ion-slides>标签的附件属性

autoplay 值是number，自动播放功能，默认值是null，也不自动翻页，如果赋值的话，就会自动播放，以毫秒为单位，不循环。

control 值是slides 传入一个或者一组Slide实例化对象，通过当前slide来控制这些slides.

dir 值是字符串形式 如果dir属性值等于rtlinteral_rtl等于ture;

direction 默认值是"horizontal",还可以设置成“vertical";

effect 用于设置动画效果，默认值是”slide”,其他值有：slide, fade, cube, coverflow， flip;

initialSlide 设置slide初始索引值，默认值是0;

loop 默认false，设置成true,就会无限循环。

pager 默认false,设置成true,底部就会有小点点。

paginationType 楼上pager的样式，默认值为‘bullets’，‘fraction’, ‘progress’

parallax 如果设置为true,开发者可以在slider里面使用parallaxed元素;

slidesPerView 默认值是1，

spaceBetween 每个slide之间的距离 默认值0;

speed 滑动用时，默认值300;

zoom 默认false,如果设置为true,