需求

产品要求在每个页面上都加一个浮动按钮，上面一个电话图标，点击后给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事件改变其位置，这样应该比较简单࿰