基于角度实现的模拟微信小程序组件

来源：未知浏览 142次时间 2021-06-15 22:04

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

基于angular实现模拟微信小程序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是声明在某个组件里的所以此服务只有在此组件以及子组件中可以注入使用。

组件内服务

标签：视图 gt lt 组件

上一篇: 实战“小打卡”小创意从创意到完整开发过程解析
下一篇: 「旺道seo推广」搜索引擎优化的实用技巧分享，三沙seo服务

基于角度实现的模拟微信小程序组件

热门文章

最新文章