11、幻燈片：Slides

/* ---ts----*/
 
import { Page,Slides } from 'ionic-angular';
import { ViewChild } from '@angular/core'
 
 
@Page({
  templateUrl: 'build/pages/tabs/tabs.html'
})
export class TabsPage {
  @ViewChild('mySlide') mySlide : Slides;
  slides:Array<Object>;
  mySlideOptions:Object;
  constructor(){
 
  }
  slides = [
    {
      title: "Welcome to the Docs!",
      description: "The <b>Ionic Component Documentation</b> showcases a number of useful components that are included out of the box with Ionic.",
      image: "img/ica-slidebox-img-1.png",
    },
    {
      title: "What is Ionic?",
      description: "<b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.",
      image: "img/ica-slidebox-img-2.png",
    },
    {
      title: "What is Ionic Platform?",
      description: "The <b>Ionic Platform</b> is a cloud platform for managing and scaling Ionic apps with integrated services like push notifications, native builds, user auth, and live updating.",
      image: "img/ica-slidebox-img-3.png",
    }
  ];
  goToSlide() {
    this.mySlide.slideTo(2, 500);
    console.log(this.mySlide.getActiveIndex() + '----獲取當前幻燈片的索引。')
    console.log(this.mySlide.getPreviousIndex() + '----獲取上一個幻燈片的索引。')
    console.log(this.mySlide.length() + '----獲取幻燈片的總數。')
    console.log(this.mySlide.isEnd() + '----該幻燈片是最后一個。')
    console.log(this.mySlide.isBeginning() + '----該幻燈片不是第一個。')
    console.log(this.mySlide.getSlider())
  }
  mySlideOptions = {
    initialSlide: 1,
    direction:'horizontal',
    loop: false,
    autoplay:false,
    speed:400,
    pager:true
  };
 
}
 
 
 
//  配置 Slide屬性
//  !注意 如果想配置slide 只能這么配置 在html頁面 <ion-slides pager [options]="mySlideOptions" > 只有pager是可以作為屬性配置。
//  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 也就是該幻燈片的實例。
 
/* ---ts----*/

/* ---html----*/
 
<ion-navbar *navbar hideBackButton class="show-navbar">
  <ion-title>Slides</ion-title>
</ion-navbar>
 
<ion-content class="tutorial-page">
 
  <ion-slides #mySlide pager [options]="mySlideOptions" >
    <ion-slide *ngFor="let slide of slides">
      <ion-toolbar>
        <ion-buttons end>
          <button (click)="goToSlide()">Skip</button>
        </ion-buttons>
      </ion-toolbar>
      <img [src]="slide.image" class="slide-image"/>
      <h2 class="slide-title" [innerHTML]="slide.title"></h2>
      <p [innerHTML]="slide.description"></p>
    </ion-slide>
 
  </ion-slides>
</ion-content>
 
/* ---html----*/

/* ---scss----*/
 
.tutorial-page {
 
  .toolbar-background {
    background: #fff;
    border-color: transparent;
  }
 
  .slide-zoom {
    height: 100%;
  }
 
  .slide-title {
    margin-top: 2.8rem;
  }
 
  .slide-image {
    max-height: 50%;
    max-width: 60%;
    margin: 18px 0;
  }
 
  b {
    font-weight: 500;
  }
 
  p {
    padding: 0 40px;
    font-size: 14px;
    line-height: 1.5;
    color: #60646B;
 
    b {
      color: #000000;
    }
  }
 
}
 
/* ---scss----*/

首先 。這里的文件是 ts 而不是 js 具體看安裝

我們的 幻燈片 Slide其實是一個 子集視圖。所以我需要   import { ViewChild } from  '@angular/core'。

 

然后我在 ts 文件中 @ViewChild('mySlide') mySlide : Slides; 給子集視圖賦予一個變量 以確保可以調到這個組件里的方法。

然后在 html 中  < ion-slides  #mySlide pager [options]="mySlideOptions" > 綁定這個變量 #mySlide

這段html當中 只有 pager 是可以作為屬性來配置 幻燈片的 其他的方法需要用 options 以變量的形式賦予 配置屬性

 

<ion-slides #mySlider (didChange)="onSlideChanged()" [options]="mySlideOptions"> 為翻頁時候的觸發方法。