小程序滑动事件
- 在编写代码时,可能会遇到这种需求,页面需要左右滑动 或者 上下滑动 ,但是小程序的上拉加载,下拉刷新却不合适,所以使用🗡
html代码
<view bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
-给你所需要的滑动的view 添加事件
滑动事件 JS
在js 顶部
var startY, endY;
var moveFlag = true; // 判断执行滑动事件
滑动事件 JS 处理函数
touchStart: function(e) {
startY = e.touches[0].pageY; // 获取触摸时的原点
moveFlag = true;
},
// 触摸移动事件
touchMove: function(e) {
endY = e.touches[0].pageY; // 获取触摸时的原点
if (moveFlag) {
if (endY - startY > 50) {
console.log("pullDown")
moveFlag = false;
}
if (startY - endY > 50) {
console.log("pullup")
moveFlag = false;
}
}
},
// 触摸结束事件
touchEnd: function(e) {
moveFlag = true; // 回复滑动事件
},
startY endY 代表 页面Y轴 上下滑动
startX endX 代表 页面X轴 左右滑动
if (endY - startY > 50) 则是判断 滑动距离 当手指在屏幕上划过距离超过 50rpx 则触发事件
微信文档: https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html