基于angular實現模擬微信小程序swiper組件

發布時間：2017-12-19 10:17 所屬欄目：小程序開發教程

這段時間的主業是完成一個家政類小程序，終于是過審核發布了。不得不說微信的這個小程序生態還是頗有想法的，拋開他現有的一些問題不說，其提供的組件系統乍一看還是蠻酷的。比如其提供的一個叫swiper的視圖組件，就 ...

這段時間的主業是完成一個家政類小程序，終于是過審核發布了。不得不說微信的這個小程序生態還是頗有想法的，拋開他現有的一些問題不說，其提供的組件系統乍一看還是蠻酷的。比如其提供的一個叫swiper的視圖組件，就可以在寫界面的時候省不少時間和代碼，輪播圖片跟可滑動列表都可以用。導致現在回來寫angular項目時也想整一個這樣的組件出來，本文就將使用angular的組件能力和服務能力完成這么一個比較通用，耦合度較低的swiper出來。

首先要選擇使用的技術，要實現的是與界面打交道的東西，自然是實現成一個組件，最終要實現的效果是寫下這樣的代碼就可以完成一個可以滑動的視圖來：

</swipers>

然后要把最基本的組件定義寫出來，顯然這里要定義兩個組件。第一個是父級組件，選擇器名字就叫ytm-swipers，目前做的事情僅僅是做一個外殼定義基本樣式，使用時的子標簽都會插入在ng-content標簽中。

 1 @Component({
 2     selector: 'ytm-swipers',
 3     template: `
 4         <div class="view-body">
 5             <ng-content></ng-content>
 6         </div>
 7         `,
 8     styles: [`
 9         .view-body{height: 100%;width: 100%;overflow: hidden;position: relative;}
10     `]
11 })

第二個就是子視圖了，在父級組件下，每個子組件都會沾滿父級組件，只有當前的子組件會顯示，當切換視圖時實際做的就是更改這些子組件的顯示方式，說的最簡單的話，這個子組件還是僅僅用來加一個子外殼，給外殼添加基本樣式，實際的頁面內容原封不動放在ng-content標簽中。

 1 @Component({
 2     selector: 'swiper',
 3     template: `
 4         <div class="view-child" *ngIf="swiper.displayList.indexOf(childId) >= 0"
 5         [ngClass]="{'active': swiper.displayList[0] === childId,
 6         'prev': swiper.displayList[2] === childId, 'next': swiper.displayList[1] === childId}">
 7             <ng-content></ng-content>
 8         </div>
 9     `,
10     styles: [`
11         .view-child{
12             height: 100%;width: 100%;position: absolute;top: 0;
13             transition: 0.5s linear;background: #fff;
14             overflow-x: hidden;
15         }
16         .view-child.active{left: 0;z-index: 9;}
17         .view-child.next{left: 100%;z-index: 7;}
18         .view-child.prev{left: -100%;z-index: 8;}
19     `]
20 })

下一步是要讓這兩個父子組件完成心靈的溝通，講道理其實可以直接使用ElementRef強行取到DOM來操作，不過這里使用的是組件內服務。和普通的服務使用上沒差別，不過其provider是聲明在某個組件里的，所以此服務只有在此組件以及子組件中可以注入使用。

			組件內服務

用到的變量包括： changing變量保證同時只能進行一個切換，保證切換完成才能進行下一個切換；swiperList裝填所有的視圖的id，這個id在視圖初始化的時候生成；displayList數組只會有三個成員，裝填的依次是當前視圖在swiperList中的索引，下一個視圖的索引，上一個視圖的索引；current變量用戶指示當前顯示的視圖的id。實際視圖中的顯示的控制就是使用ngClass指令來根據displayList和視圖id附加相應的類，當前視圖會正好顯示，前一視圖會在左邊剛好遮擋，后一視圖會在右邊剛好遮擋。

同時服務還要提供幾個方法：Add用于添加制定id的視圖，Next用于切換到下一個視圖(左滑時調用)，Prev用于切換到前一個視圖(右滑時調用)，再來一個Skip用于直接切換到指定id的視圖。

在子視圖中注入此服務，需要在子視圖初始化時生成一個id并Add到視圖列表中：

1 export class YTMSwiperViewComponent {
2     public childId: number;
3     constructor(@Optional() @Host() public swiper: SwiperService) {
4         this.childId = this.swiper.swiperList.length;
5         this.swiper.Add(this.swiper.swiperList.length);
6     }
7 }

這個id其實就是已有列表的索引累加，且一旦有新視圖被初始化，都會添加到列表中(支持動態加入很酷，雖然不知道會有什么隱藏問題發生)。

父組件中首先必須要配置一個provider聲明服務：

 1 @Component({
 2     selector: 'ytm-swipers',
 3     template: `
 4         <div class="view-body">
 5             <ng-content></ng-content>
 6         </div>
 7         `,
 8     styles: [`
 9         .view-body{height: 100%;width: 100%;overflow: hidden;position: relative;}
10     `],
11     providers: [SwiperService]
12 })

然后就是要監聽手勢滑動事件，做出相應的切換。以及傳入一個current變量，每當此變量更新時都要切換到對應id的視圖去，實際使用效果就是：

<ytm-swipers [current]="1">...</ytm-swipers>可以將視圖切換到id喂1的視圖也就是第二個視圖。

			父組件實現

此外代碼中還添加了一個回調函數，可以再視圖完成切換時執行傳入的回調，這個使用的是angular的EventEmitter能力。

以上就是全部實現了，實際的使用示例像這樣：

 1 <ytm-swipers [current]="0" (onSwiped)="切換回調($event)">
 2     <swiper>
 3         視圖1
 4     </swiper>
 5     <swiper>
 6         視圖2
 7     </swiper>
 8     <swiper>
 9         視圖3
10     </swiper>
11 </ytm-swipers>