微信小程序浮动按钮_微信小程序浮动按钮的实现

需求

产品要求在每个页面上都加一个浮动按钮，上面一个电话图标，点击后给VIP联系人拨打电话。我想这个简单，一两个小时应该就实现了吧。于是我折腾了差不多两天。

初步构想

记得以前看小程序组件文档时有一个movable-view，可以拿来用一下。结果真正使用时才发现，movable-view外面需要套一个movable-area才可以。没关系，套上好了。

首先，建一个组件，叫phone好了，最外层是movable-area，里面是movable-view，再里面是一个普通view，加一个hover-class可以实现点击状态。把这个组件加个每一个页面上。

movable-view的移动范围是根据外层的movable-area来确定的，所以movable-area应该铺满全屏，但这样一来就把页面上其他内容全部挡住了。那就利用touchstart/touchend事件判断是浮动按钮是否被按下，按下的状态就设置movable-area大小为按钮大小，位置为按钮的位置(通过设置transform样式实现)，而没有按下的状态，再让它恢复成全屏大小，位置为(0,0)(transform:none).

试验了一下，初始位置调为左上角，第一次拖动是正常的，第二次拖就不对劲了。虽然第二次拖动movable-view的初始位置是正确的，但它的change事件中得到的坐标却是从(0,0)也就是被点击那一瞬间开始算的，虽说此时已经把movable-area的位置、大小恢复了。

通用方案

既然movable-view不好用，那就改成普通view算了，通过touchmove事件改变其位置，这样应该比较简单，虽说可能不如movable-view拖起来流畅。但对于支持下拉刷新的页面，拖动浮动按钮时，往往就下拉刷新了。此时即使catch页面上某些veiw的touchmove方法，也是不管用的。因为下拉刷新不是view的下拉，而是整个页面的下拉，也没有办法阻止冒泡什么的。自定义Modal的mask层也有同样的问题，但好在一般用户不会去拖动mask层，但浮动按钮却是必拖无疑问的。

如果可以忍的话，这个方案是可行的。但是，不能忍啊。于是我开始了无休止的纠结，甚至一度想干脆让这个浮动按钮直接固定在右下角算了。

最终实现

又经过长时间的反复试验，我发现movable-view直接用也是可以的，但直接用的话change事件不太灵敏，干脆不让它change，能不让页面下拉刷新也是好的。不过呢，direction设为none以后，它的表现和普通view一样，拖动时页面照样会下拉刷新。最后只得设成了vertical，这样会有一个小小的bug，让最终的方案不是那么完美。

下面是我的代码：

components/phone/index.wxml

components/phone/index.wxss

.make-phone-call-movable {