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

╰半橙微兮° 2023-07-17 04:47 2阅读 0赞

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

最近被用户要求再每个页面显示一个悬浮按钮实现业务，what fuck？？！！！  
虽然内心不愿意，但是身体还是得接受。。

首先偷懒百度，发现网络上都是自己捕捉touch事件做的，以我的经验这种实现方式肯定一堆bug,并且页面会卡顿，果断不踩坑。希望大家也不要踩坑~

实现方案：我们可以利用微信小程序的内置组件轻松实现！  
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;
      }

是不是非常简单？？

核心代码就这么点，业务实现就看你们自己了

如果需要每个页面都有，写个组件引入即可

实现了以后我立即就写出文档分享给大家了，希望大家可以少走弯路~~~

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

原创不易，转载请注明出处！！

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序实现可移动悬浮按钮（超简单）

微信小程序实现如丝般顺滑的可移动悬浮按钮（超简单）最近被用户要求再每个页面显示一个悬浮按钮实现业务，what fuck？？！！！虽然内心不愿意，但是身体还是得接受

╰半橙微兮°/ 2023年07月17日 04:47/ 0 赞/ 3 阅读

相关微信小程序悬浮可拖动客服组件

写了一个微信小程序里面的悬浮可拖动的客服组件，下次可以直接使用了。 movable-area 和movable-view 用法参考微信官方手册：https://develop

青旅半醒/ 2022年12月29日 04:34/ 0 赞/ 258 阅读

相关微信小程序悬浮按钮-点击传参

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

布满荆棘的人生/ 2022年09月04日 05:46/ 0 赞/ 240 阅读

相关微信小程序悬浮功能小按钮

如上图所示，废话不多说，直接上代码一、WXML ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

悠悠/ 2022年09月04日 04:54/ 0 赞/ 449 阅读

相关微信小程序-组件悬浮

字节跳动校招内推码: C4BDSMC 投递链接: https://job.toutiao.com/s/J691fRK 内推交流QQ群：104917572

男娘i/ 2022年05月18日 05:49/ 0 赞/ 390 阅读

相关微信小程序实现圆角矩形按钮

> 在微信小程序的开发当中，为了界面的美观，我们通常需要修改原始按钮的css样式，下面教大家如何将按钮改成圆角矩形首先将按钮原始边框关闭，然后设置按钮的的弧度，css如下：

快来打我*/ 2022年05月15日 10:44/ 0 赞/ 1598 阅读

相关微信小程序：实现悬浮返回和分享按钮

效果图： ![效果图.gif][.gif] 数据：依赖微信小程序接口wx.redirectTo、onShareAppMessage来完成跳转接口： [

浅浅的花香味﹌/ 2022年03月07日 13:10/ 0 赞/ 337 阅读

相关微信小程序之可拖动悬浮按钮的实现

微信小程序之可拖动悬浮按钮的实现什么都不说先看效果图 ![在这里插入图片描述][20190321173621284.gif] 下面上代码 wxml

柔情只为你懂/ 2022年03月01日 04:38/ 0 赞/ 1175 阅读

相关如何将操作按钮悬浮固定在微信小程序底部？

本章节主要介绍了如何将操作按钮悬浮固定在[微信][Link 1]小程序底部?操作起来也比较简单，还不会的朋友一起跟着小编学习一下吧，希望对你们有所帮助。常见的有加入购物车按

今天药忘吃喽~/ 2022年02月15日 01:53/ 0 赞/ 341 阅读

相关微信小程序实现轮播图（超简单）

Tips：微信小程序可以在HbuilderX用HTML标签（如Ddiv、span等）写前端代码，也可以用微信小程序语法写（view、swiper标签），然后npm run de

女爷i/ 2021年12月09日 07:03/ 0 赞/ 1323 阅读