h5可拖动悬浮按钮_手机端H5悬浮按钮怎么实现的呢？

最近公司项目需要在H5页面上悬浮一个按钮，同时要求按钮是可以拖动的并且需要可以自动贴边，无奈前端小伙伴不怎么给力，无奈只能我顶上了。我觉得这种情况应该可以抽出一个组件，这次就仔细探讨一下悬浮按钮的实现原理吧。

因为平时我在开发过程中，手机端的开发我都推荐公司小伙伴使用uniapp进行，这次的自然也是在uniapp的环境下开发的组件，uniapp本身使用了小程序rpx作为单位。对于之前从来没使用过的小伙伴来说应该有点陌生，那我先解释一下这个rpx的单位是什么。

rpx单位一开始是微信小程序主推的，目的其实也很简单，因为手机屏幕有大有小，为了适应不同的屏幕才导致这个单位的出现。具体是这么定义的：规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

有了定义以后，也就有了计算的算法了，最终就得到了1rpx=0.5px，接下来就来说说悬浮按钮的实现过程吧。

首先，先使用一个view标签，也就是pc端的div，view是uniapp自己定义的一个标签，最终H5会编译成div小程序会编译成view。接下来自然就是view标签的css样式，其实也简单，因为整个view只是盒子而已。

整个盒子的z-index赋值为1000，也就浮在了最上层了。同时使用了固定定位整个盒子，因为之后要动态去修改整个盒子的位置，实现拖动效果。同时