上滑加载是移动端瀑布流的常用加载方式,实现方式还是非常简单的,没必要借助插件。
一般都需要配合图片懒加载等优化方式一同使用,这里附上:通过IntersectionObserver实现懒加载 - 掘金 (juejin.cn),不用监听scroll事件就可以实现懒加载,很好的优化页面性能。
思路
监听滚动区域的 touchstart 与 touchmove 事件,用户滑动一定距离后就请求下一页的数据。 可根据需求来决定是否配合 touchend 使用;
有一些细节需要注意:
- 根据需求来决定滑动多少距离就加载下一屏的内容,这个需自己来平衡。通用的做法是给底部放一个加载动画,拉到底部就显示动画,加载完毕后就正常显示内容。
- 设置最小的请求间隔,防止过于频繁的去触发请求。
- 如果加载了过多的内容的话,页面可能会卡顿。这个时候的优化方式:
- 精简插入的dom结构,以尽量少的标签去实现效果
- 滑动过一定的距离就删除上部的元素,配合下滑加载上一页的内容
- 通过上滑下滑来控制上一页下一页,只在页面插入三页的内容,多余的移除。
效果如下:
代码
var myListBox = $('body')[0], canQuery = false;
var startX, startY, moveEndX, moveEndY, X, Y, lastTime;
myListBox.addEventListener('touchstart', function (e) {
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
});
myListBox.addEventListener('touchmove', function (e) {
var now = new Date();
if ((now - lastTime) < 500) { // 设置个最小请求间隔,防止请求频率过高
return;
}
lastTime = now;
moveEndX = e.changedTouches[0].pageX;
moveEndY = e.changedTouches[0].pageY;
X = moveEndX - startX;
Y = moveEndY - startY;
if (Y < -10) { // 滑动多少距离触发
if (Prayer.pageNumIndex <= (Prayer.maxPages - 1)) { // pageNumIndex 是当前页码 maxPages 是接口返回的总页数
$('.load_box').css('visibility', 'visible'); // .load_box就是loading动画的样式
canQuery = true;
} else {
$('#loadTips').hide() // 最后一页的话就取消的上滑加载更多的提示
$('.load_box').css('visibility', 'hidden');
canQuery = false;
}
} else {
canQuery = false;
}
});
myListBox.addEventListener('touchend', function (e) {
if (canQuery) {
Prayer.pageNumIndex++;
if (Prayer.pageNumIndex > Prayer.maxPages - 1) {
$('#loadTips').hide()
$('.load_box').css('visibility', 'hidden');
return;
}
Prayer.queryList(Prayer.pageNumIndex)
}
});