平时做微信小程序的时候可能会用到悬浮按钮，但是想要有在整个页面拖动效果，其实在微信开放文档中有这个组件可以直接实现，简单好用。
wxml 参数下x和y是按钮的位置
<movable-area> <movable-view x="{{x}}" y="{{y}}" direction="all" bindtap="transmit"> <image src="{{imgUrl}}" mode="widthFix" style="width:60rpx;height:auto"></image> </movable-view> </movable-area>js
data: { x:0, y:0, imgUrl:"https://shitu-query-nj.su.bcebos.com/2020-07-01/11/d58ad5506e4792e5?authorization=bce-auth-v1/7e22d8caf5af46cc9310f1e3021709f3/2020-07-01T11:39:52Z/300/host/da8e74f0364c392ebcfcac8e643413de0aa3753c6025c737ba2fc6d253a44464" }, transmit(){ console.log("转发事件") }wxss 可设置pointer-events防止遮挡层事件无法触发
movable-area{ position: fixed; width: 100%; height: 100%; left: 0rpx; top: 0rpx; z-index: 99; pointer-events: none; } movable-view{ width: 80rpx; height: 80rpx; border-radius: 80rpx; display: flex; align-items: center; justify-content: center; background-color: rgba(240, 242, 245, 0.7); border: 4rpx solid rgba(153, 153, 153, 1); pointer-events: auto; }