最近百团大战各种社团展露头角， 需要实现每个页面显示一个悬浮按钮实现业务，what fuck？？！！！
虽然内心不愿意，但是身体还是得接受。。
首先偷懒百度，发现网络上都是自己捕捉touch事件做的，以我的经验这种实现方式肯定一堆bug,并且页面会卡顿，果断不踩坑。希望大家也不要踩坑~
实现方案：我们可以利用微信小程序的内置组件轻松实现！
1.将整个屏幕用movable-area组件覆盖，
2.在movable-area内部添加一个movable-view实现自由滑动。
3.重点：CSS属性 pointer-events 。
代码奉上：
wxml:
1 <movable-area class="movable-area"> 2 <movable-view class="movable-view" direction="all"> 3 </movable-view> 4 </movable-area>
wxss:
1 .movable-area{ 2 pointer-events:none;// 这个属性设置为none,让所有事件穿透过去 3 z-index: 100; 4 width: 100%; 5 height: 100%; 6 position: fixed; 7 top: 0; 8 left: 0; 9 right: 0; 10 bottom: 0; 11 } 12 .movable-view{ 13 pointer-events:auto;// 重设为auto,覆盖父属性设置 14 height: 50px; 15 width: 50px; 16 background: red; 17 }
也可以是背景图片
核心代码就这么点，业务实现就看你们自己了
如果需要每个页面都有，写个组件引入即可
请发表评论