首页 > 代码库 > ionic2 使用slides制作滑动效果的类型选择栏

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

2024-09-06 21:33:16   217人阅读

类似的效果如下图：

技术分享

 

1. 生成一个component

 

 
  1. ionic g component MySlide  

 

 

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中添加代码：

 

 
  1. import {Component, Input, Output, EventEmitter} from ‘@angular/core‘;  
  2.   
  3. @Component({  
  4.   selector: ‘my-slide‘,  
  5.   templateUrl: ‘build/components/my-slide/my-slide.html‘  
  6. })  
  7. export class MySlide {  
  8.   
  9.   @Input("slides") slides: string[] = [];  
  10.   @Input("pageNumber") pageNumber: number = 5;  
  11.   @Output("slideClick") slideClick = new EventEmitter<number>();  
  12.   
  13.   mySlideOptions;  
  14.   selectedIndex: number = 0;  
  15.   
  16.   constructor() {  
  17.   }  
  18.   
  19.   ngOnInit() {  
  20.     this.mySlideOptions = {  
  21.       loop: false,  
  22.       autoplay: false,  
  23.       initialSlide: 0,  
  24.       pager: false,  
  25.       slidesPerView: this.pageNumber,  
  26.       paginationHide: true,  
  27.       paginationClickable: true  
  28.     };  
  29.   }  
  30.   
  31.   onClick(index) {  
  32.     this.selectedIndex = index;  
  33.     this.slideClick.emit(index);  
  34.   }  
  35. }  

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

 

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

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

 

4. my-slide.scss

 
 
  1. $slide-height-small: 40px;  
  2. $slide-height-large: 50px;  
  3.   
  4. .slide-title {  
  5.   width: 100%;  
  6.   height: $slide-height-small;  
  7.   color: #666666;  
  8.   padding: 0;  
  9. }  
  10.   
  11. .slide-title-unit {  
  12.   padding-bottom: 8px;  
  13.   font-size: 14px;  
  14.   height: $slide-height-small;  
  15.   line-height: $slide-height-small;  
  16. }  
  17.   
  18. .slide-title-active {  
  19.   color: map_get($colors, primary);  
  20.   border-bottom: 3px solid map_get($colors, primary);  
  21. }  

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

 

 

5. 使用方法：

 
 
  1. <my-slide (slideClick)="onSlideClick($event)" [slides]="pageSlides" [pageNumber]="7"></my-slide>  

 

 

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

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


联系
我们