258资源分享网

这段时间的主业是完成一个家政类小程序，终于是过审核发布了。不得不说微信的这个小程序生态还是颇有想法的，抛开他现有的一些问题不说，其提供的组件系统乍一看还是蛮酷的。比如其提供的一个叫swiper的视图组件，就 ...

 

 

 

这段时间的主业是完成一个家政类小程序，终于是过审核发布了。不得不说微信的这个小程序生态还是颇有想法的，抛开他现有的一些问题不说，其提供的组件系统乍一看还是蛮酷的。比如其提供的一个叫swiper的视图组件，就可以在写界面的时候省不少时间和代码，轮播图片跟可滑动列表都可以用。导致现在回来写angular项目时也想整一个这样的组件出来，本文就将使用angular的组件能力和服务能力完成这么一个比较通用，耦合度较低的swiper出来。

首先要选择使用的技术，要实现的是与界面打交道的东西，自然是实现成一个组件，最终要实现的效果是写下这样的代码就可以完成一个可以滑动的视图来：

<swipers>

<swiper>视图1</swiper>

<swiper>视图2</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附加相应的类，当前视图会正好显示，前一视图会在左边刚好遮挡，后一视图会在右边刚好遮挡。