Ionic開(kāi)發(fā)過(guò)程中可能遇到當(dāng)標(biāo)簽個(gè)數(shù)較多時(shí)可能需要顯示固定數(shù)量的標(biāo)簽，然后做成可滑動(dòng)的形式驱敲。
20160912135110197.gif
創(chuàng)建一個(gè)組件:
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);
}
}
使用的時(shí)候在html中添加以下即可
<my-slide (slideClick)="onSlideClick($event)" [slides]="guideTags" [pageNumber]="4"></my-slide>
其中:
- slideClick - 標(biāo)簽的點(diǎn)擊事件
- slides - 存放每個(gè)標(biāo)簽的標(biāo)題, String[] 類型
- pageNumber - 顯示的標(biāo)簽數(shù)量
