1. 程式人生 > >ionic2 使用slides製作滑動效果的型別選擇欄

ionic2 使用slides製作滑動效果的型別選擇欄

類似的效果如下圖:

1. 生成一個component

ionic g component MySlide

2. 在my-slide.html中新增程式碼:

<ion-slides class="slide-title" [options]="mySlideOptions">
  <ion-slide *ngFor="let slide of slides; let i = index;">
    <div (click)="onClick(i)">
      <span class="slide-title-unit" [ngClass]="{'slide-title-active': selectedIndex == i}">{{slide}}</span>
    </div>
  </ion-slide>
</ion-slides>

其中slides是一個數組,存放型別字串,如上圖顯示的"推薦", "環球"等

在此步驟中,ionic 2.0正式版本已經不再使用options,需要將程式碼修改為以下:

<ion-slides class="slide-title" [slidesPerView]="pageNumber" [pager]="false">

3. 在my-slide.ts中新增程式碼:

import {Component, Input, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'my-slide',
  templateUrl: 'build/components/my-slide/my-slide.html'
})
export class MySlide {

  @Input("slides") slides: string[] = [];
  @Input("pageNumber") pageNumber: number = 5;
  @Output("slideClick") slideClick = new EventEmitter<number>();

  mySlideOptions;
  selectedIndex: number = 0;

  constructor() {
  }

  ngOnInit() {
    this.mySlideOptions = {
      loop: false,
      autoplay: false,
      initialSlide: 0,
      pager: false,
      slidesPerView: this.pageNumber,
      paginationHide: true,
      paginationClickable: true
    };
  }

  onClick(index) {
    this.selectedIndex = index;
    this.slideClick.emit(index);
  }
}
Input引數slides,my-slide的屬性傳入,顯示型別的字串陣列。

Input引數pageNumber,my-slide的屬性傳入,表示當前螢幕可以顯示的型別數目,預設為5。

Output引數slideClick,當點選某個型別時,將點選的index返回給使用者。

ionic 2.0正式版本中,請刪除mySlideOptions相關程式碼。

4. my-slide.scss

$slide-height-small: 40px;
$slide-height-large: 50px;

.slide-title {
  width: 100%;
  height: $slide-height-small;
  color: #666666;
  padding: 0;
}

.slide-title-unit {
  padding-bottom: 8px;
  font-size: 14px;
  height: $slide-height-small;
  line-height: $slide-height-small;
}

.slide-title-active {
  color: map_get($colors, primary);
  border-bottom: 3px solid map_get($colors, primary);
}
其中slide-title-active表示選中時改變型別文字顏色以及下方顯示橫線。

5. 使用方法:

<my-slide (slideClick)="onSlideClick($event)" [slides]="pageSlides" [pageNumber]="7"></my-slide>
最後,不要忘記在@Component中新增directives: [MySlide]

點選檢視demo