移动端分页上滑加载瀑布流简易方案

思路

监听滚动区域的 touchstart 与 touchmove 事件，用户滑动一定距离后就请求下一页的数据。 可根据需求来决定是否配合 touchend 使用； 有一些细节需要注意：

1. 根据需求来决定滑动多少距离就加载下一屏的内容，这个需自己来平衡。通用的做法是给底部放一个加载动画，拉到底部就显示动画，加载完毕后就正常显示内容。
2. 设置最小的请求间隔，防止过于频繁的去触发请求。
3. 如果加载了过多的内容的话，页面可能会卡顿。这个时候的优化方式:
   • 精简插入的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)
				}
			});

我的个人公众号：归园田居 每日分享前端知识与资讯～