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

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

功能图片：

中间的微信按钮可以拖动

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>
1
2
3
4

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

//.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) {
	
	  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79