100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 微信小程序实现可移动悬浮按钮(超简单)

微信小程序实现可移动悬浮按钮(超简单)

时间:2022-07-31 00:36:43

相关推荐

微信小程序实现可移动悬浮按钮(超简单)

微信小程序实现如丝般顺滑的可移动悬浮按钮(超简单)

最近被用户要求再每个页面显示一个悬浮按钮实现业务

虽然内心不愿意,但是身体还是得接受。。

首先偷懒百度,发现网络上都是自己捕捉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;}

是不是非常简单??

很讨厌网上抄袭的文档,百度一下到处都是一摸一样的,恶心人。

原创不易,转载请注明出处!!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。