简单mpvue中实现左右滑动事件
//简单mpvue中实现左右滑动事件
<div @touchstart="touchStart" @touchend="touchEnd"> </div>
<script>
data() {
return {
interval: "",
flag_hd: false
};
},
methods: {
// 触摸开始事件
touchStart: function(e) {
var that = this;
that.touchDot = e.mp.changedTouches[0].pageX; // 获取触摸时的原点
console.log(that.touchDot);
// 使用js计时器记录时间
that.interval = setInterval(function() {
that.time++;
}, 100);
that.flag_hd = true;
},
// 触摸结束事件
touchEnd: function(e) {
var that = this;
var touchMove = e.mp.changedTouches[0].pageX;
console.log(touchMove);
// 向左滑动
if (
touchMove - that.touchDot <= -40 &&
that.time < 10 &&
that.flag_hd == true
) {
that.flag_hd = false;
//执行切换页面的方法
console.log("向右滑动");
}
//向右滑动
if (
touchMove - that.touchDot >= 40 &&
that.time < 10 &&
that.flag_hd == true
) {
that.flag_hd = false;
//执行切换页面的方法
console.log("向左滑动");
}
clearInterval(that.interval); // 清除setInterval
that.time = 0;
},
}
</script>