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

效果图：

20160912135110197.gif

1.在所需页面的html中，加入

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

2.scss文件中，加入样式(可根据自己需要更改)

$slide-height-small: 4.2rem;
$slide-height-large: 4.2rem;

.slide-title {
  width: 100%;
  height: $slide-height-small;
  color: #666666;
  background-color: map_get($colors, primary);
  padding: 0;
  border-bottom:2px solid map_get($colors, light);
}

.slide-title-unit {
  padding-bottom: 0.6rem;
  font-size: 1.6rem;
  color: white;
  height: $slide-height-small;
  line-height: $slide-height-small;
}

.slide-title-active {
  border-bottom: 3px solid yellow;
  color: yellow;
}

3.ts中设置选项卡

    slides: string[] = ['推荐', '热点', '视频','手机','科技','问答','汽车','社会','数码'];//显示的数据
    pageNumber: number = 6;//同时显示的个数
    selectedIndex: number = 0;//默认选中的

至此完成。