微信小程序实现手势滑动效果
程序员文章站
2024-02-09 22:34:10
本文实例为大家分享了微信小程序实现手势滑动的具体代码,供大家参考,具体内容如下
wxml:
本文实例为大家分享了微信小程序实现手势滑动的具体代码,供大家参考,具体内容如下
wxml:
<view bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend" > </view>
index.js:
var touchstartx = 0;//触摸时的原点 var touchstarty = 0;//触摸时的原点 var time = 0;// 时间记录,用于滑动时且时间小于1s则执行左右滑动 var interval = "";// 记录/清理时间记录 var touchmovex = 0; // x轴方向移动的距离 var touchmovey = 0; // y轴方向移动的距离 page({ // 触摸开始事件 touchstart: function (e) { touchstartx = e.touches[0].pagex; // 获取触摸时的原点 touchstarty = e.touches[0].pagey; // 获取触摸时的原点 // 使用js计时器记录时间 interval = setinterval(function () { time++; }, 100); }, // 触摸移动事件 touchmove: function (e) { touchmovex = e.touches[0].pagex; touchmovey = e.touches[0].pagey; }, // 触摸结束事件 touchend: function (e) { var movex = touchmovex - touchstartx var movey = touchmovey - touchstarty if (math.sign(movex) == -1) { movex = movex * -1 } if (math.sign(movey) == -1) { movey = movey * -1 } if (movex <= movey) {// 上下 // 向上滑动 if (touchmovey - touchstarty <= -30 && time < 10) { console.log("向上滑动") } // 向下滑动 if (touchmovey - touchstarty >= 30 && time < 10) { console.log('向下滑动 '); } }else {// 左右 // 向左滑动 if (touchmovex - touchstartx <= -30 && time < 10) { console.log("左滑页面") } // 向右滑动 if (touchmovex - touchstartx >= 30 && time < 10) { console.log('向右滑动'); } } clearinterval(interval); // 清除setinterval time = 0; }, })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。