效果图：
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;//默认选中的
