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

需要做个浮在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;
}