微信小程序实现如丝般顺滑的可移动悬浮按钮(超简单)
最近被用户要求再每个页面显示一个悬浮按钮实现业务
虽然内心不愿意,但是身体还是得接受。。
首先偷懒百度,发现网络上都是自己捕捉touch事件做的,以我的经验这种实现方式肯定一堆bug,并且页面会卡顿,果断不踩坑。希望大家也不要踩坑~
原创地址: /qq_35487047/article/details/104970954
实现方案:我们可以利用微信小程序的内置组件轻松实现!
1.将整个屏幕用movable-area组件覆盖,
2.在movable-area内部添加一个movable-view实现自由滑动。
3.重点:CSS属性pointer-events。
代码奉上:
wxml:
<movable-area class="movable-area"><movable-view class="movable-view" direction="all"></movable-view></movable-area>
wxss:
.movable-area{pointer-events:none;// 这个属性设置为none,让所有事件穿透过去z-index: 100;width: 100%;height: 100%;position: fixed;top: 0;left: 0;right: 0;bottom: 0;}.movable-view{pointer-events:auto;// 重设为auto,覆盖父属性设置height: 50px;width: 50px;background: red;}
是不是非常简单??
很讨厌网上抄袭的文档,百度一下到处都是一摸一样的,恶心人。
原创不易,转载请注明出处!!