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

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

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

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%2F7e22d8caf5af46cc9310f1e3021709f3%2F2020-07-01T11%3A39%3A52Z%2F300%2Fhost%2Fda8e74f0364c392ebcfcac8e643413de0aa3753c6025c737ba2fc6d253a44464"
  },
  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;
}