最近公司项目需要在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,也就浮在了最上层了。同时使用了固定定位整个盒子,因为之后要动态去修改整个盒子的位置,实现拖动效果。同时