ionic2 使用slides制作滑动效果的类型选择栏

类似的效果如下图：

1. 生成一个component

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是一个数组，存放类型字符串，如上图显示的"推荐"， "环球"等

3. 在my-slide.ts中添加代码：

Input参数slides，my-slide的属性传入，显示类型的字符串数组。

Input参数pageNumber，my-slide的属性传入，表示当前屏幕可以显示的类型数目，默认为5。

Output参数slideClick，当点击某个类型时，将点击的index返回给使用者。

4. my-slide.scss

其中slide-title-active表示选中时改变类型文字颜色以及下方显示横线。

5. 使用方法：

<my-slide (slideClick)="onSlideClick($event)" [slides]="pageSlides" [pageNumber]="7"></my-slide>

最后，不要忘记在@Component中添加directives: [MySlide]

巴特西