可任意拖动的客服按钮
作者:互联网
html:
<button style="bottom:{{ballBottom}}px;right:{{ballRight}}px;" bindtouchmove="ballMoveEvent">
</button>
JS:
Page({
data: {
ballBottom: 240,
ballRight: 120,
screenHeight: 0,
screenWidth: 0,
},
onl oad: function (option) {
var that = this;
wx.getSystemInfo({
success: function (res) {
that.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;
//防止坐标越界,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
});
}
})
标签:function,拖动,res,pageY,可任意,pageX,按钮,var,screenWidth 来源: https://blog.csdn.net/qq_43218075/article/details/96562352