微信小程序实现可长按移动控件

网友投稿 439 2023-11-11

微信小程序可长按移动控件，供大家参考，具体内容如下

微信小程序实现可长按移动控件

–包含超出边界监测，性能不够理想【原因：setData在毫秒级刷新时会极大程度影响渲染性能】

Javascript

?
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
Page({
/**
* 页面的初始数据
*/
data: {
//浮动按钮坐标
flow_y: 130,
flow_x: 20,
pre_y:0,
pre_x:0,
//标记移动
moveFlag: false,
//标记控件是否可放置
canNotPlace: false,
imgSrc:"",
},
//长按按钮移动控件
longPress: function (e) {
console.log(e)
this.setData({
moveFlag: true,
pre_x:e.touches[0].clientX,
pre_y:e.touches[0].clientY,
})
// console.log(e)
console.log("begin:(", this.data.flow_x, this.data.flow_y, ")")
// this.setData({
// flow_x: 1334-e.touches[0].pageX, // 获取触摸时的原点
// flow_y: 750-e.touches[0].pageY,
// })
//console.log(startX)
},
// 触摸结束事件
touchEnd: function (e) {
this.setData({
moveFlag: false
})
// console.log("flow:(", this.data.flow_x, this.data.flow_y, ")")
//监测按钮放置区域
if (!((this.data.flow_x < 730) && (this.data.flow_x > 20))&&((this.data.flow_y < 1150) && (this.data.flow_y > 130))) {
this.setData({
flow_x: 20, // 转换rpx
flow_y: 130,
})
}
// this.setData({
// flow_x: 20, // 转换rpx
// })
},
touchMove: function (e) {
//根据move差值动态布局
if (this.data.moveFlag) {
// console.log("page:(", e.touches[0].pageX, e.touches[0].pageY, ")")
// console.log(move_x,move_y)
var x =this.data.flow_x -(e.touches[0].clientX-this.data.pre_x)*2
var y =this.data.flow_y -(e.touches[0].clientY-this.data.pre_y)*2
this.setData({
flow_x: x, // 转换rpx
flow_y: y,
})
// console.log(x,y)
// this.setData({
// flow_x: x, // 转换rpx
// flow_y: y,
// })
if (!(((x < 730) && (x > 20))&&((y < 1000) && (y > 130)))) {
this.setData({
canNotPlace: true,
})
} else {
this.setData({
canNotPlace: false,
})
}
this.setData({
pre_x:e.touches[0].clientX,
pre_y:e.touches[0].clientY,
})
}
},
catchtouchmove: function () {
//防止蒙层触摸穿透
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
wx.hideLoading()
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
this.getArticle()
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})

WXSS

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.follow_icon{
position: fixed;
/* margin: 0 10rpx; */
width:70rpx;
height:70rpx;
bottom: var(--flow_y--);
right: var(--flow_x--);
z-index: 1001;
}
/*mask*/
.drawer_screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 5;
background: #000;
opacity: 0.5;
overflow: hidden;
}

WXML

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

您可能感兴趣的文章:微信小程序移动拖拽视图-movable-view实例详解微信小程序内拖动图片实现移动、放大、旋转的方法

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 数据
上一篇:微信小程序 聊天室简单实现
下一篇:微信小程序实现转盘抽奖
相关文章

 发表评论

暂时没有评论，来抢沙发吧~