JI-UI适用于微信小程序的UI库（二）——j-local-popup点击位置弹出层
读者你好，我将在这一系列文章中逐步更新JI-UI的公共UI库。但在短期内只会更新由我创作的部分。
问题的引出
全局弹出层无疑的最常见的弹出层实现，但是它带来的问题。在我看来，不够轻型化，难以胜任某些场景。 我希望，可以实现如下的行为：
如图可以看到，我在点击选择字体颜色图标时，弹出层会跟随鼠标点击（实际中当然是跟随用户触碰）弹出。
问题的解决
要点
- 要获取用户点击位置；事件里会有
- 要获取弹出层的宽高；这里肯定要动态获取，通过this.createSelectorQuery()实现
- 确定弹出层的位置；要考虑到不能超出页面边界，以及从实用性的角度，应该考虑从上方弹出、从下方弹出以及从左边、从右边弹出。
- 弹出层怎么取消？我们考虑了如何弹出，但是也务必考虑它的注销流程。实际上我们在设计自定义组件的时候，应当考虑它的整个生命周期。简略来说，即组件的创建、工作、销毁。
解决问题
组件的wxml部分
<slot name="main" catchtouchend="openPopup"></slot>
<view class="popup" catchtouchend="closePopup" wx:if="{{visible}}">
</view>
<view wx:if="{{visible||ishow}}" style="top:{{top}}px;left:{{left}}px;position:fixed;opacity:0;transform:scale(0.1)" class="out-class {{show?'show':''}}">
<slot name="popup"></slot>
</view>
解析一下，这段代码中中存在两个插槽，其中一个为main，另一个为popup；
main是设计给被点击对象的，这样子想使用触碰弹出层的话方式会非常简单，只需要把原本的代码带上slot="main"放进组件中即可
以下边这段代码为例，我们希望点击它可以弹出“Love you”。
<i class="hello">
hello
</i>
只需要：
<j-local-popup>
<i class="hello" slot="main">
hello
</i>
<view slot="popup" class="love">Love you</view>
</j-local-popup>
同样的，slot名为popup的组件将作为点击后的弹出层出现。
组件的js部分
阅读了wxml部分，你应当知道组件是创建方法是openPopup，销毁它则是通过closePopup
下边是openPopup的解析，closePopup较为简单，如果有需要可以自行在git中查看。
openPopup(e){
var that=this;
let detail=e.changedTouches[0];
var top=detail.clientY;
var left=detail.clientX;
var width=0;
var height=0;
new Promise((resolve,reject)=>{
that.setData({
visible:true,
ishow:true
},()=>{
let o = that.createSelectorQuery().select(".out-class").boundingClientRect(rect => {
width=rect.width;
height=rect.height;
}).exec((res)=>{
resolve(res[0])
});
})
}).then(res=>{
if (that.properties.position=='top') {
that.setData({
top:top-(height*10)-5,
left:left-(width*10/2),
show:true
})
}
})
}
基本上，代码由三步组成。
1. 开始渲染组件
that.setData({
visible:true,
ishow:true
}
2.在渲染完组件后获取popup插槽父组件的高度、宽度
that.createSelectorQuery().select(".out-class").boundingClientRect(rect => {
width=rect.width;
height=rect.height;
}).exec((res)=>{
resolve(res[0])
});
3. 处理top从上方弹出
that.setData({
top:top-(height*10)-5,
left:left-(width*10/2),
show:true
})
这里对height和width进行*10是因为初始状态通过scale(0.1)改变了组件的大小，-5则是一定程度的偏移。
组件的动画效果
演示图中，我们看到的是组件的放大缩小显隐，从我个人的角度我认为这种形式的动画会让我更舒适。
这种效果并不是很难做到。
opacity:0;
transform:scale(0.1)
opacity改变透明度，transform中的scale改变大小。
当我们把这两个初始值取消，并在tranistion中配置好贝塞尔曲线、影响参以及动画时间
transition: all ease .6s;
于是我们便完成了这个简单的动画
一个有趣的事情
有一位初学前端的朋友问我，为什么你在动画里不通过改变width和height实现，是因为这个函数方便么？
显然不能只是这样......
transform里几个函数都有极强的功能。细究会发现其中的translate移动和scale缩放的部分或者全部功能其实是可以通过改变其他css属性实现的。
- 通过直接改变width和height只会改变对应组件的长宽，子组件不会被改变，直接改变长宽适用于卷轴式的动画
- 通过带有top、left等的属性我们可以改变组件位置，但是为什么我们不应该这样做？因为通过这种方式创建出来的动画不流畅，可能我们的肉眼不一定能很好察觉，但是性能可以好为什么不做好点。
至于为什么通过带有top、left等的属性改变组件位置创建的动画并不流畅，这和浏览器的工作机制有关系，之后会专门说明。
Tips&Bugs
tip：使用catchtouch而不是bingtouch或是bindtap，因为点击这里并不希望事件传递出去使得出现输入框失焦等问题
bug：是的，我没有做不能超出页面边界的控制这一部分。因为目前还没遇见该问题，暂且不想花费宝贵的期末复习时间。
JI-UI库gitee地址：https://gitee.com/grinzero/ji-ui 文件已经上传了一部分
