微信小程序-悬浮按钮拖动

最新推荐文章于 2025-10-26 16:32:33 发布

原创

最新推荐文章于 2025-10-26 16:32:33 发布 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文介绍了如何在微信小程序中实现悬浮按钮的拖动效果。通过利用微信开放文档中的组件，可以轻松设置按钮的位置，并通过调整参数实现拖动。同时，为防止遮挡层事件被阻止，可以设置pointer-events属性。

微信小程序-悬浮按钮拖动

平时做微信小程序的时候可能会用到悬浮按钮，但是想要有在整个页面拖动效果，其实在微信开放文档中有这个组件可以直接实现，简单好用。

wxml
参数下x和y是按钮的位置

<movable-area>
  <movable-view x="{
    
    {x}}" y="{
    
    {y}}" direction="all" bindtap="transmit">

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

兔斯基的猫

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序 - 详细实现可移动悬浮按钮，全屏悬浮元素图标可拖动拖拽并自动吸附边缘，微信小程序实现悬浮球吸附边缘+计算靠边靠拢效果（详细代码，拖拽中途放手，靠左就自动跑到屏幕左侧，反之靠右跑到屏幕右侧）

🏆 前端领域优质创作者

04-09

1万+

微信小程序，vue2，vue3，微信小程序悬浮功能小按钮，自动吸附边缘效果，微信小程序之可拖动悬浮按钮的实现，如何实现靠近边缘自动吸住功能，小程序右下角的悬浮效果，实现可拖动悬浮图标，自动向两边靠拢，悬浮按钮的实现，微信小程序悬浮球效果，微信小程序（可拖动悬浮按钮）当靠近屏幕边缘时会磁吸靠近，如何实现全局悬浮按钮，悬浮球判断吸附在左右，全屏悬浮能拖着走，小程序怎么做悬浮图标靠近左右两侧能吸附住，悬浮菜单按钮，悬浮球可拖拽，全局悬浮球，全局悬浮框，实现悬浮按钮可拖动，自动吸附边缘效果，若按钮此时位于页面中间偏

微信小程序 - 详细实现悬浮可拖动且靠近屏幕边缘自动吸附悬挂图标组件，小程序可拖曳的悬浮球，支持手指按住拖拽到页面任意位置，当靠近屏幕边缘时会磁吸靠近，用于页面悬挂图片图像或按钮、图标在线客服、帮助等

高级前端工程师

08-06

4894

微信小程序，悬浮球，可拖曳的悬浮图标，微信小程序实现全屏悬浮按钮可拖动，自动吸附边缘效果，插件组件，悬浮窗，可以拖动的悬浮按钮，如何实现靠近边缘自动吸住功能，小程序怎么做悬浮图标靠近左右两侧能吸附住，悬浮图标支持拖动，小程序屏幕悬浮按钮可拖动，悬浮菜单按钮，悬浮球可拖拽，全局悬浮球，全局悬浮框，图标，图片，图像，按钮，html元素，自定义插槽内容，不卡顿，不脱手，微信小程序 悬浮球可拖动，movable-area，微信小程序之可拖动悬浮按钮的实现，微信小程序悬浮窗按钮，小程序中可拖动回弹浮窗，全屏悬浮能拖

参与评论您还未登录，请先登录后发表或查看评论

小程序实现可拖动的悬浮按钮

10-14

主要为大家详细介绍了小程序实现可拖动的悬浮按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

使用uniapp——实现微信小程序的拖拽排序（vue3+ts）

最新发布

2302_80130544的博客

10-26

877

本文介绍了微信小程序中实现列表排序的两种方案：1）通过触摸事件（touchstart/touchmove/touchend）实现拖拽排序，计算触摸位移判断是否交换元素；2）利用上下箭头按钮精确调整位置。方案采用数据交换而非DOM操作，解决了小程序无DOM元素的限制。关键实现包括：记录触摸位置、判断移动方向、交换数组元素，并通过catchtouchmove防止页面滚动。提供了完整的代码示例，包含拖拽交互、按钮控制及数据交换逻辑。

微信小程序：实现可拖动悬浮图标（列表页添加按钮）

zuo_kaizheng的博客

12-16

5186

实现的效果截图主要代码 .wxml    <view class="btn_Suspension" bindtap="openAddPage" catchtouchmove="buttonMove" bindtouchstart

微信小程序：实现可拖动悬浮图标（包括按钮角标的实现）

botellei的博客

12-27

1万+

微信小程序：实现可拖动悬浮图标在制作商城类微信小程序的过程中，我们经常会碰到需要增加可拖动悬浮图标的情况，本文简单的介绍一下可拖动悬浮按钮的实现。运行截图：主要代码： js: var startPoint Page({ data: { //按钮位置参数 buttonTop: 0, buttonLeft: 0, windowHeight: '', windowWidth: '', //角标显示数字 corner_data:0, },

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

weixin_33721344的博客

02-22

717

效果图：数据：依赖微信小程序接口wx.redirectTo、onShareAppMessage来完成跳转接口： https://developers.weixin.qq.... 前端处理： 1.设置两个按钮 2。绑定对应的事件 wxml代码： css代码： js 代码：源码下载：https://pan.baidu.co...

微信小程序 + uni-app可移动悬浮图标按钮

& 圆。的博客

05-21

1033

微信小程序 + uni-app可移动悬浮图标按钮，可移动的视图容器，在页面中可以拖拽滑动

微信小程序中悬浮窗功能的实现代码

12-29

所谓悬浮窗就是图中微信图标的按钮，采用fixed定位，可拖动和点击。这算是一个比较常见的实现场景了。为什么要用cover-view做悬浮窗？原生组件出来背锅了~ 最初我做悬浮窗用的不是cover-view，而是view。这是...

微信小程序——悬浮窗拖动

Willow_Spring的博客

02-08

1231

使用 movable-area movable-view 官方文档代码 direction="all"属性必不可缺 wxml <movable-area class="all"> <movable-view direction="all" class="touchmove">  123223 <.

button 样式_小程序 Button图标样式实现悬浮按钮效果

weixin_39568659的博客

11-23

711

buttonbutton是小程序中重要的组件微信官方api但是这样的效果都不具备很好的美观性非表单中实现悬浮按钮效果将一个矢量图图标用小程序控件封装即可这里使用text控件将矢量图作为其 background-Image代码wxml<text class="icon"></text>wxss这里使用的是 position fixed 所以可以实现位置固定...

微信小程序浮动按钮组件

06-26

根据uni-fab改版成的微信组件

小程序可移动飘窗+横向滚动+悬浮窗口

09-26

小程序可移动飘窗+横向滚动+悬浮窗口；可根据需求进行改进

微信小程序 ----- 按钮拖拽

qq_41377857的博客

07-23

714

<view class="body-suspension" style="top: {{UDnumber}}px; left: {{LRnumber}}px;" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"> 拖拽 </view> data...

微信小程序 -- 拖动悬浮按钮的实现

小草莓的博客

09-23

2724

1. 适配屏幕以及头部tab 如图所示上下左右边界值 html:  <view class='refresh' catchtap='refresh' catchtouchmove="buttonMove" bindtouchstart="buttonStart" bindtouchend="buttonEnd" styl...

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

蒋蒋

03-21

1万+

微信小程序之可拖动悬浮按钮的实现什么都不说先看效果图下面上代码 wxml <button catchtouchmove="buttonMove" catchtouchstart="buttonStart" catchtouchend="buttonEnd" style="top:{{buttonTop}}px;left:{{buttonLeft}}px;width: 50px;heig...

微信小程序的悬浮按钮

热门推荐

kerryqpw的博客

12-18

1万+

微信小程序的悬浮按钮

微信小程序：如何制作浮动按钮（或者图标）

qiuqiuzlw123的专栏

05-16

6319

以按钮为例：在index.wxml文件中加入： <button class = "address-add">您好，欢迎访问AI图片内容识别</button> 在index.wxss文件中，加入： /*添加地址按钮*/ .address-add { position: fixed; bottom: 0; width: 100%; } 我用相同原理做了一款浮动...

微信小程序悬浮按钮拖拽

01-07

### 微信小程序实现悬浮按钮拖拽功能为了实现在微信小程序中的悬浮按钮拖拽功能，可以采用`movable-view`和`movable-area`控件。这些控件允许创建能够响应用户触碰并随之移动的界面元素。 #### 创建悬浮按钮及其行为逻辑在页面WXML文件中定义一个可移动区域以及位于该区域内的一颗按钮： ```xml <view class="container">  <movable-area style="position:absolute; top:0px; bottom:0px; left:0px; right:0px;">  <movable-view direction="all" damping="50" friction="20" out-of-bounds="{{true}}" inertia="{{true}}" x="{{buttonX}}" y="{{buttonY}}"> <button bindtap="openCustomerService">联系客服</button> </movable-view> </movable-area> </view> ``` 上述代码片段设置了悬浮按钮可以在整个屏幕范围内自由滑动，并指定了当点击按钮时触发`openCustomerService`函数[^1]。 #### 数据绑定与事件处理接着，在对应的JS文件里初始化位置参数并编写相应的事件处理器： ```javascript Page({ data: { buttonX: 375 / 2 - 40, buttonY: 667 - 80 }, openCustomerService() { wx.openCustomerServiceChat({}); } }) ``` 这里设定了初始坐标使得悬浮按钮显示于屏幕底部中央偏上一点的位置；同时实现了打开在线客服聊天窗口的功能。 #### 添加样式美化最后给CSS加上一些简单的样式让按钮看起来更美观些: ```css page{ height: 100%; } .container { width: 100vw; min-height: 100vh; position:relative; } button { border-radius: 50%; /* 圆形 */ padding: 1em; background-color:#ffcc00; color:white; font-size: larger; } ``` 以上就是完整的关于如何在一个微信小程序内设置一个支持拖拽操作的浮动按钮的方法说明[^2]。