使用renderjs在视图层创建了一个摇杆,摇杆addEventListener监听滑动,在监听函数里面,使用this.$ownerInstance.callMethod函数不起作用,请问我该怎样才能调用逻辑层函数?
代码如下:
renderBtn() {
var bottom = document.getElementById(".bottom");
if (!bottom) {
bottom = document.createElement("div");
bottom.classList = ["bottom"];
document.body.appendChild(bottom);
var that = this;
window.off = function() {
plus.nativeUI.confirm("确定结束吗?", (e) => {
if (e.index == 0) {
}
});
};
bottom.innerHTML = [
"<div class='btn'><div class='back'></div></div>",
"<div class='ybtn off' onclick='off()'></div>",
].join('');
}
var zbtn = document.querySelector(".btn");
console.log('zbtn:', zbtn);
zbtn.addEventListener('touchstart', function(e) {
console.log('点击左摇杆');
this.startX = e.touches[0].clientX;
this.startY = e.touches[0].clientY;
})
zbtn.addEventListener('touchmove', function(e) {
this.endX = e.touches[0].clientX;
this.endY = e.touches[0].clientY;
var that = this;
console.log('that======:' + that);
//获取滑动距离
var distanceX = this.endX - this.startX;
var distanceY = this.endY - this.startY;
//判断滑动方向
if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 0) {
console.log('往右滑动:' + distanceX);
that.callMethod("doOver");
} else if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX < 0) {
console.log('往左滑动:' + distanceX);
} else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY < 0) {
console.log('往上滑动');
} else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY > 0) {
console.log('往下滑动');
}
})
zbtn.addEventListener('touchend', function() {
console.log('Swipe direction: ' + direction);
// console.log('松开左摇杆');
this.startX = 0;
this.startY = 0;
this.endX = 0;
this.endY = 0;
var back = document.querySelector(".back");
back.style.left = 40 + 'px';
back.style.top = 40 + 'px';
})
},
0 个回复