场景复现
在上期文章中,我们简单介绍了如何监听页面滑动,但是在文章的最后留下了一个问题。我们如何判断用户是在做上滑操作还是下滑操作?本期文章将用两种方法(onPageScroll或者touchstart、touchmove、touchend)解决这个问题。
核心干货
onPageScroll结合scrollTop实现
在上期文章中,关于onPageScroll的用法已经介绍的很全面了。这里的话就直接写逻辑层的内容。
首先我们能监听页面变化的参数只有scrollTop,所以我们需要从scrollTop的变化下手。在上期文章中,我们发现当页面上滑时scrollTop递增,页面下滑时scrollTop递减。所以我们可以通过判断scrollTop的变化来判断用户的动作。
data:{
scrollTopArr:<number[]>[]
}
onPageScroll: function(e) {
var that = this
var scrollTop = e.scrollTop;
var scrollTopArr = that.data.scrollTopArr;
scrollTopArr.push(scrollTop)
var len = scrollTopArr.length;
len > 5 ? scrollTopArr.slice(0,len-4):scrollTopArr;
if(scrollTopArr[len-1] > scrollTopArr[len-2]){
console.log("上滑")
} else if(scrollTopArr[len-1] < scrollTopArr[len-2]) {
console.log("下滑")
}
现在理一下逻辑,由于onPageScroll是实时调用执行的,所以我们需要对每次获取到的数据进行存储,所以有了第一部分的data代码,首先定义一个数组用来存放每次调用的scrollTop。但是我们需要考虑到,这个函数调用是非常频繁的,所以一次的数据会有几百上千和数据,因此我们在做数据比较的时候,需要对代码进行截取,所以有了代码截取的部分。
上滑和下滑的监听都实现了。下面我们简单介绍一下第二种方法。
了解touch方法
微信小程序中可以通过监听touchstart
、touchmove
、touchend
事件来判断用户的滑动方向。
具体方法如下:
-
在
touchstart
事件中记录下手指触摸的位置startY
。 -
在
touchmove
事件中记录下手指移动的位置moveY
。 -
在
touchend
事件中比较startY
和moveY
的大小,如果moveY
比startY
大,则用户是在向上滑动,反之则是向下滑动。
以下是示例代码:
let startY = 0;
// 监听touchstart事件
function handleTouchStart(e) {
startY = e.touches[0].clientY;
}
// 监听touchmove事件
function handleTouchMove(e) {
const moveY = e.touches[0].clientY;
const direction = moveY > startY ? 'up' : 'down';
console.log(`用户正在向${direction}滑动`);
}
// 监听touchend事件
function handleTouchEnd(e) {
const moveY = e.changedTouches[0].clientY;
const direction = moveY > startY ? 'up' : 'down';
console.log(`用户向${direction}滑动结束`);
}
// 绑定事件
const element = document.querySelector('.scrollable-element');
element.addEventListener('touchstart', handleTouchStart);
element.addEventListener('touchmove', handleTouchMove);
element.addEventListener('touchend', handleTouchEnd);