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

类似的效果如下图：

1. 生成一个component

1. ionic g component MySlide

2. 在my-slide.html中添加代码：

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

其中slides是一个数组，存放类型字符串，如上图显示的"推荐"， "环球"等

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

1. import {Component, Input, Output, EventEmitter} from '@angular/core';
2. @Component({
3. selector: 'my-slide',
4. templateUrl: 'build/components/my-slide/my-slide.html'
5. })
6. export class MySlide {
7. @Input("slides") slides: string[] = [];
8. @Input("pageNumber") pageNumber: number = 5;
9. @Output("slideClick") slideClick = new EventEmitter<number>();
10. mySlideOptions;
11. selectedIndex: number = 0;
12. constructor() {
13. }
14. ngOnInit() {
15. this.mySlideOptions = {
16. loop: false,
17. autoplay: false,
18. initialSlide: 0,
19. pager: false,
20. slidesPerView: this.pageNumber,
21. paginationHide: true,
22. paginationClickable: true
23. };
24. }
25. onClick(index) {
26. this.selectedIndex = index;
27. this.slideClick.emit(index);
28. }
29. }

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

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

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

4. my-slide.scss

1. $slide-height-small: 40px;
2. $slide-height-large: 50px;
3. .slide-title {
4. width: 100%;
5. height: $slide-height-small;
6. color: #666666;
7. padding: 0;
8. }
9. .slide-title-unit {
10. padding-bottom: 8px;
11. font-size: 14px;
12. height: $slide-height-small;
13. line-height: $slide-height-small;
14. }
15. .slide-title-active {
16. color: map_get($colors, primary);
17. border-bottom: 3px solid map_get($colors, primary);
18. }

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

5. 使用方法：

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

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