微信小程序开发之拖拽 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;
}
本站公众号
   欢迎关注本站公众号,获取更多程序园信息
开发小院