网站建设与文字的工作,平谷手机网站建设,个人注册公司代理,域名系统在开发过程中无意间想到了这个功能。一番查询之后找到这个功能相关的代码片段。拷贝过来之后各种报错#xff0c;经过自己的整改以可以使用。
功能图片#xff1a; 中间的微信按钮可以拖动
wxml#xff1a;页面代码
button catchtouchmovebuttonMove cat…在开发过程中无意间想到了这个功能。一番查询之后找到这个功能相关的代码片段。拷贝过来之后各种报错经过自己的整改以可以使用。
功能图片 中间的微信按钮可以拖动
wxml页面代码
button catchtouchmovebuttonMove catchtouchstartbuttonStart catchtouchendbuttonEnd styletop:{{buttonTop}}px;left:{{buttonLeft}}px; classmoneyimage src/image/wx.png classwx_img/imageview classzhifu微信支付/view/buttonimage路径换成自己的图片路径
wxsscss页面样式
//不要忘记清除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) {}
})
