類似的效果如下圖:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIyVGduV2QvwVe0lmdhJ3ZvwFM38CXlZHbvN3cpR2Lc1TPB10QGtWUCpEMJ9CXsxWam9CXwADNvwVZ6l2c052bm9CXUJDT1wkNhVzLcRnbvZ2LcZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39zN5EDMxETNzEjMxkDM2EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
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