这段时间的主业是完成一个家政类小程序,终于是过审核发布了。不得不说微信的这个小程序生态还是颇有想法的,抛开他现有的一些问题不说,其提供的组件系统乍一看还是蛮酷的。比如其提供的一个叫偷窃者的视图组件,就可以在写界面的时候省不少时间和代码,轮播图片跟可滑动列表都可以用。导致现在回来写角项目时也想整一个这样的组件出来,本文就将使用角的组件能力和服务能力完成这么一个比较通用,耦合度较低的偷窃者出来。
首先要选择使用的技术,要实现的是与界面打交道的东西,自然是实现成一个组件,最终要实现的效果是写下这样的代码就可以完成一个可以滑动的视图来:
& lt; swipers>
& lt; swiper>视图1 & lt;/swiper>
& lt; swiper>视图2 & lt;/swiper>
& lt;/swipers>
然后要把最基本的组件定义写出来,显然这里要定义两个组件。第一个是父级组件,选择器名字就叫ytm-swipers,目前做的事情仅仅是做一个外壳定义基本样式,使用时的子标签都会插入在ng-content标签中。
@ component ({
选择器:“ytm-swipers”,
模板:
& lt; div类=皏iew-body”比;
& lt; ng-content> & lt;/ng-content>
& lt;/div>
”,
风格:['
.view-body{高度:100%;宽度:100%;溢出:隐藏;位置:相对;}
']
})
第二个就是子视图了,在父级组件下,每个子组件都会沾满父级组件,只有当前的子组件会显示,当切换视图时实际做的就是更改这些子组件的显示方式,说的最简单的话,这个子组件还是仅仅用来加一个子外壳,给外壳添加基本样式,实际的页面内容原封不动放在ng-content标签中。
@ component ({
选择器:“偷窃者”,
模板:
& lt; div类=坝? ngIf=皊wiper.displayList.indexOf (childId)在=0 "
[ngClass]="{“活跃”:偷窃者。displayList [0]===childId,
“上一页”:偷窃者。displayList [2]===childId“next”:偷窃者。displayList [1]===childId}”在
& lt; ng-content> & lt;/ng-content>
& lt;/div>
”,
风格:['
.view-child {
高度:100%;宽度:100%;位置:绝对;:0;
过渡:0.5 s线性;背景:# fff;
overflow-x:隐藏;
}
.view-child。活跃的{左:0;z - index: 9;}
.view-child。下一个{左:100%;z - index: 7;}
.view-child。prev{左:-100%;z - index: 8;}
']
})
下一步是要让这两个父子组件完成心灵的沟通,讲道理其实可以直接使用ElementRef强行取到DOM来操作,不过这里使用的是组件内服务。和普通的服务使用上没差别,不过其提供者是声明在某个组件里的,所以此服务只有在此组件以及子组件中可以注入使用。
@Injectable ()
类SwiperService {
公共swiperList: [];
公共displayList: [];//0为当前1为下一个2为上一个
当前公众:数量;
私人改变:布尔;
构造函数(){
这一点。改变=false;
这一点。swiperList=[];
这一点。displayList=[];
这一点。当前=0;
}
公共添加(id:数量){
this.swiperList.push (id);
开关(this.swiperList.length) {
案例1:
这一点。displayList [0]=id;
返回;
案例2:
这一点。displayList [1]=id;
返回;
默认值:
这一点。displayList [2]=id;
返回;
}
}
下():公共Promise{
如果(this.changing) {
返回新Promise((解决,拒绝)=比;{
返回拒绝(改变);
});
}
这一点。改变=true;
让c=this.swiperList.indexOf (this.displayList [0]);
让n=this.swiperList.indexOf (this.displayList [1]);
让p=this.swiperList.indexOf (this.displayList [2]);
p=c;
c=n;
n=(c + 1) % this.swiperList.length;
这一点。displayList [0]=this.swiperList [c];
这一点。displayList [2]=this.swiperList [p];
这一点。displayList [1]=1;
setTimeout(()=比;{
这一点。displayList [1]=this.swiperList [n];
这一点。改变=false;
},500);
返回新Promise((解决,拒绝)=比;{
返回解决(this.displayList [0]);
});
}
公共上一页():Promise{
如果(this.changing) {
返回新Promise((解决,拒绝)=比;{
返回拒绝(改变);
});
}
这一点。改变=true;
让c=this.swiperList.indexOf (this.displayList [0]);
让n=this.swiperList.indexOf (this.displayList [1]);
让p=this.swiperList.indexOf (this.displayList [2]);
n=c;
c=p;
p=p - 1 & lt;0 & # 63;this.swiperList。长度- 1:p - 1;
这一点。displayList [0]=this.swiperList [c];
这一点。displayList [1]=this.swiperList [n];
这一点。displayList [2]=1;
setTimeout(()=比;{
这一点。displayList [2]=this.swiperList [p];
这一点。改变=false;
},500);
返回新Promise
