微信小程序开发之拖拽 image 触摸事件监听

最新推荐文章于 2025-12-06 07:29:42 发布

转载最新推荐文章于 2025-12-06 07:29:42 发布 · 1.7k 阅读

文章标签：

#小程序移动事件 #拖拽事件

微信专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在scroll-view中实现一个可以自由拖动的浮动按钮。通过监听触摸事件，获取坐标并更新样式属性，确保按钮始终跟随用户的触控移动。

需要做个浮在scroll-view之上的button.尝试了一下.

上GIF:

1.index.wxml

简单的设置一张图片,添加触摸事件监听.点击事件监听.根据触摸事件获取X Y位移,设置为image的位置

<image
class="image-style"
src="../../images/sand.png"
bindtap="ballClickEvent"
style="bottom:{{ballBottom}}px;right:{{ballRight}}px;"
bindtouchmove="ballMoveEvent">
</image>

2.index.js

data: {
ballBottom:80,/**初始位置*/
ballRight: 220,/**初始位置*/
screenHeight: 0,
screenWidth: 0, 
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var _this = this;
wx.getSystemInfo({
success: function (res) {
_this.setData({
screenHeight: res.windowHeight,
screenWidth: res.windowWidth,
});
}
}); 
},

//开始移动事件
ballMoveEvent: function (e) {
console.log('我被拖动了....')
var touchs = e.touches[0];
var pageX = touchs.pageX;
var pageY = touchs.pageY;
console.log('pageX: ' + pageX)
console.log('pageY: ' + pageY)
//防止坐标越界,view宽高的一般 
if (pageX < 
30) return;
if (pageX > 
this.data.screenWidth - 30) 
return;
if (this.data.screenHeight - pageY <=30)
return;
if (pageY <= 
30) return;
//这里用right和bottom.所以需要将pageX pageY转换
var x = 
this.data.screenWidth - pageX - 30;
var y = 
this.data.screenHeight - pageY - 30;
console.log('x: ' + x)
console.log('y: ' + y)
this.setData({
ballBottom: y,
ballRight: x
});
},




ballClickEvent: function () {
console.log('点击了....')
},

3.index.wxss

这里需要设置z-index

.image-style{
position: absolute;
bottom: 240px;
right: 100px;
width: 60px;
height: 60px;
z-index: 100;
}