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

标签：padding   代码   primary   bottom   tracking   copy   this   nic   water   

类似的效果如下图：

1. 生成一个component

2. 在my-slide.html中添加代码：

[html] view plain copy

 

 

1. <ion-slides class="slide-title" [options]="mySlideOptions">  
2.   <ion-slide *ngFor="let slide of slides; let i = index;">  
3.     <div (click)="onClick(i)">  
4.       <span class="slide-title-unit" [ngClass]="{‘slide-title-active‘: selectedIndex == i}">{{slide}}</span>  
5.     </div>  
6.   </ion-slide>  
7. </ion-slides>  

其中slides是一个数组，存放类型字符串，如上图显示的"推荐"， "环球"等

3. 在my-slide.ts中添加代码：

Input参数slides，my-slide的属性传入，显示类型的字符串数组。

Input参数pageNumber，my-slide的属性传入，表示当前屏幕可以显示的类型数目，默认为5。

Output参数slideClick，当点击某个类型时，将点击的index返回给使用者。

4. my-slide.scss

其中slide-title-active表示选中时改变类型文字颜色以及下方显示横线。

5. 使用方法：

最后，不要忘记在@Component中添加directives: [MySlide]

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

标签：padding   代码   primary   bottom   tracking   copy   this   nic   water   

原文地址：http://www.cnblogs.com/hedengyao/p/6501834.html