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(, );//第三個，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屬性值等于

rtl

interal_rtl等于ture;

direction

預設值是

"horizontal"

,還可以設定成

“vertical"

;

effect

用于設定動畫效果，預設值是”slide”,其他值有：

slide, fade, cube, coverflow， flip

;

initialSlide

設定slide初始索引值，預設值是

;

loop

預設false，設定成

true

,就會無限循環。

pager

預設false,設定成

true

,底部就會有小點點。

paginationType

樓上pager的樣式，預設值為

‘bullets’

，

‘fraction’, ‘progress’

parallax

如果設定為

true,

開發者可以在slider裡面使用

parallaxed

元素;

slidesPerView

預設值是

1

，

spaceBetween

每個slide之間的距離 預設值

;

speed

滑動用時，預設值

300

;

zoom

預設

false

,如果設定為

true

,