微信小程序 - 可移动悬浮框的开发

<wxs module="move" src="./util.wxs"></wxs>

<view class='tips' class="moveable" catchtouchmove="{{move.touchMove}}" data-windowwidth="{{windowwidth}}" data-windowheight="{{windowheight}}" style="position:fixed;z-index:1">

<!-- <text class='text close'>X </text> -->

<!-- <text class='text'>有疑问可以点这里咨询哦</text> -->

<button class='testSingleBtn' open-type='contact'></button>

</view>

module.exports = {

touchMove: function(event, ownerInstance) {

// ownerInstance 表示的是触发事件的组件所在的组件的 ComponentDescriptor 实例，如果触发事件的组件是在页面内的，ownerInstance 表示的是页面实例。

var clientX = event.changedTouches[0].clientX,

clientY = event.changedTouches[0].clientY;

var windowWidth = event.currentTarget.dataset.windowwidth,

windowHeight = event.currentTarget.dataset.windowheight;

var style = {};

var instance = ownerInstance.selectComponent(".moveable");

if (clientX >= windowWidth) {

style.right = 0;

style.left = "auto";

} else if (clientX <= 0) {

style.left = 0;

style.right = "auto";

} else {

style.left = clientX + "px";

style.right = "auto";

}

if (clientY <= 0) {

style.top = 0;

style.bottom = "auto";

} else if (clientY >= windowHeight) {

style.bottom = "0";

style.top = "auto";

} else {

style.top = clientY + "px";

style.bottom = "auto";

}

console.log("in touchMove", style)

instance.setStyle(style)

}

}