bindtouchstart="touchStart" //开始 bindtouchend="touchEnd"//结束
一、wxml文章来源:https://www.toymoban.com/news/detail-812159.html
<view bindtouchstart="touchStart" bindtouchend="touchEnd" ></view>
二、wjs文章来源地址https://www.toymoban.com/news/detail-812159.html
let touchDotX = 0;//X按下时坐标
let touchDotY = 0;//y按下时坐标
let interval;//计时器
let time = 0;//从按下到松开共多少时间*100
// 触摸开始事件
touchStart: function(e) {
touchDotX = e.touches[0].pageX; // 获取触摸时的原点
touchDotY = e.touches[0].pageY;
// 使用js计时器记录时间
interval = setInterval(function() {
time++;
}, 100);
},
// 触摸结束事件
touchEnd: function(e) {
let touchMoveX = e.changedTouches[0].pageX;
let touchMoveY = e.changedTouches[0].pageY;
let tmX = touchMoveX - touchDotX;
let tmY = touchMoveY - touchDotY;
if (time < 20) {
let absX = Math.abs(tmX);
let absY = Math.abs(tmY);
if (absX > 2 * absY) {
if (tmX<0){
console.log("左滑=====")
}else{
console.log("右滑=====")
}
}
if (absY > absX * 2 && tmY<0) {
console.log("上滑动=====")
}
}
clearInterval(interval); // 清除setInterval
time = 0;
}
到了这里,关于微信小程序监听用户操作手势,左滑右滑上滑的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!