【微信小程序】浮动按钮拖动功能

在开发过程中无意间想到了这个功能。一番查询之后找到这个功能相关的代码片段。拷贝过来之后各种报错，经过自己的整改以可以使用。

功能图片：

在这里插入图片描述
中间的微信按钮可以拖动

wxml：页面代码

<button catchtouchmove="buttonMove" catchtouchstart="buttonStart" catchtouchend="buttonEnd" style="top:{{buttonTop}}px;left:{{buttonLeft}}px;" class="money"><image src="/image/wx.png" class="wx_img"></image><view class="zhifu">微信支付</view></button>

image路径换成自己的图片路径

wxss：css页面样式

//不要忘记清除button自带样式
/* 支付按钮样式 */
.money{width: 35%;height:100rpx;border-radius:10px;position:fixed;box-shadow:0px 0px 5px #909090;background: #fff;padding-left: 0px;padding-right: 0px;text-align: left;
}.wx_img{width: 60rpx;height: 60rpx;margin-top: 20rpx;margin-left: 20rpx;float: left;
}.zhifu{width: 125rpx;height: 50rpx;float: left;font-size: 0.8rem;text-align: center;line-height: 50rpx;margin-left: 25rpx;margin-top: 25rpx;color: #909090;
}

//.js  页面代码
Page({data:{// 浮动按钮样式buttonTop: 0,buttonLeft: 0,windowHeight: '',windowWidth: '',startPoint:""},/*** 拖动浮动*/buttonStart: function (e) {this.setData({startPoint: e.touches[0]})},buttonMove: function (e) {var startPoint1 = this.data.startPoint;var endPoint = e.touches[e.touches.length - 1];var translateX = endPoint.clientX - startPoint1.clientX;var translateY = endPoint.clientY - startPoint1.clientY;this.setData({startPoint: endPoint})var buttonTop = this.data.buttonTop + translateY;var buttonLeft = this.data.buttonLeft + translateX;//判断是移动否超出屏幕if (buttonLeft + 50 >= this.data.windowWidth) {buttonLeft = this.data.windowWidth - 50;}if (buttonLeft <= 0) {buttonLeft = 0;}if (buttonTop <= 0) {buttonTop = 0}if (buttonTop + 50 >= this.data.windowHeight) {buttonTop = this.data.windowHeight - 50;}this.setData({buttonTop: buttonTop,buttonLeft: buttonLeft})},buttonEnd: function (e) {}
})