效果圖：

20160912135110197.gif

1.在所需頁(yè)面的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文件中，加入樣式(可根據(jù)自己需要更改)

$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中設(shè)置選項(xiàng)卡

    slides: string[] = ['推薦', '熱點(diǎn)', '視頻','手機(jī)','科技','問答','汽車','社會(huì)','數(shù)碼'];//顯示的數(shù)據(jù)
    pageNumber: number = 6;//同時(shí)顯示的個(gè)數(shù)
    selectedIndex: number = 0;//默認(rèn)選中的

至此完成。