Ionic2 - 可滑动标签

Ionic开发过程中可能遇到当标签个数较多时可能需要显示固定数量的标签，然后做成可滑动的形式。

20160912135110197.gif

创建一个组件:

ionic g component MySlide

• my-slide.html

<ion-slides class="slide-title" [slidesPerView]="pageNumber" [pager]="false">
  <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>

• my-slide.scss

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

  .slide-title {
    background-color: #fff;
    width: 100%;
    height: $slide-height-large;
    padding: 0;
    border-bottom: 1px solid #eeeeee !important;
  }

  .slide-title-unit {
    padding-bottom: 12px;
    font-size: 1.6rem !important;
    color: #666666;
    height: $slide-height-small;
    font-weight: 800;
    opacity: 0.8;
    line-height: $slide-height-small;
    text-transform: uppercase;
  }

  .slide-title-active {
    color: #fc5454 !important;
    border-bottom: 3px solid #fc5454
  }
}

• my-slide.ts

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

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

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

  selectedIndex: number = 0;

  constructor() {
  }

  onClick(index) {
    this.selectedIndex = index;
    this.slideClick.emit(index);
  }
}

使用的时候在html中添加以下即可

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

其中:

1. slideClick - 标签的点击事件
2. slides - 存放每个标签的标题, String[] 类型
3. pageNumber - 显示的标签数量

引用链接