js滚动到底部加载更多(翻页)

asfx站长

2020.07.17 23:54:29 阅读 1891

## 滚动加载看这里就够了！！

### 分析：（主要是思路！）
#### js滚动到底部加载更多来实现翻页主要有以下几点思路要注意：

##### 1.页面监听滚轮的距离
###### 判断条件为scrollTop(拖动滚动条距离顶部距离)+windowHeight(窗体高度)+设定提前触底距离 是否大于或等于 scrollHeight(文档内容实际高度)，是则触发点击更多操作。

###### 设定提前触底距离一般为0，如果你想在页面还没真正拉到底，比如下面还有1 2个元素的时候就已经去触发更多操作了，这个时候就把0相应改大一点。这样做可以优化用户体验，没有明显的停顿感（去加载数据需要一定时间）

##### 2.点击更多
###### 这里核心功能就是去请求新一页的数据，添加到文末。但是要注意的是，用户在不停往上拉动页面，可能会同时触发多次更多操作去请求同一页数据。这会引发不必要的请求，占用了服务器资源，也会导致页面组装数据时出现重复现象。

###### 所以这里必须引入锁的概念，我用了全局变量currentReqPageNo(当前正在请求第几页)来控制禁用同样的页码数据请求。

###### 并且ajax在请求后端服务器的数据时必须采用同步的方式，即async要设置成false！！（默认为true，异步。）

###### 最后就是当没有更多数据的时候底部提示友好文字。并且用全局变量来控制用户的滚动操作不再触发请求数据和提示动作。

##### 至此整个滚动加载更多才完成了，也是相对好的一种处理方式了！

### 下面就是以上思路的代码实现：
```

<div id="data">
	<div>原数据...<div>
	<div>待加载更多的新数据...</div>
</div>

var pageNum;//第几页
var pages;//总页数
var currentReqPageNo = 1;//当前正在请求第几页
var alreadyTipsNoMore = false;//已提示没有更多了

$(window).scroll(function () {
	if(isMobile){
		var scrollTop = $(this).scrollTop();
		var windowHeight = $(this).height();
		var scrollHeight = $(document).height();
		//console.log(scrollTop + ',' + windowHeight + ',' + scrollHeight)
		if ((scrollTop + windowHeight + 0) >= scrollHeight) {//早n px触发点击更多操作
			//此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
			clickMore();
			// console.log("bottom reached !");
		}
	}
});

//点击更多
function clickMore() {
	try{
		if(pageNum < pages){
			var reqNo = pageNum + 1;
			if(reqNo == currentReqPageNo){//已在请求中...防止并发请求同一页数据，耗费服务器资源且会导致组装数据重复
			}else{
				// layer.msg('正在获取更多数据...');
				currentReqPageNo = reqNo;
				getData(reqNo, true);//请求分页数据，第二个参数表示追加新一页的数据
			}
		}else{
			// layer.msg('没有更多数据了...');
			if(!alreadyTipsNoMore) {
				alreadyTipsNoMore = true;
				//追加没有更多了的提示内容
				$('#data').append('<div style="display:flex;justify-content:center;align-items:center;"><span>哥，我也是有底线的~</span></div>');
			}
		}
	}catch(e){
		layer.msg('呀，获取失败了...');
		//处理失败回退当前正在请求的页码
		currentReqPageNo = pageNum;
		console.log(e);
	}
}

//ajax请求后台数据
function getData(pageNo, append) {
	if(append == null) append = true;//默认追加
	var _html = '';
	//_html为ajax请求服务器新一页的新数据进行html组装的结果
	$.ajax({
		type:"POST",
		url: '',
		async:false,//这里必须改成同步
		data: {
			pageNo:pageNo
		},
		success: function (r) {
			if(r.code == 200){
				if(append){//追加数据，这里加载更多使用追加的形式，否则需要读取原html数据再加上新的html数据进行渲染，并且这样会出现屏幕闪屏的效果，体验不好。所以必须使用追加形式。
					$('#data').append(_html);
				}else{//否则为覆盖数据
					$('#data').html(_html);
				}
				pageNum = r.data.pageNum;
				pages = r.data.pages;
			}else{
				console.log("请求失败," + r.msg);
			}
		},
		error: function (resp){
			console.log("请求出错！");
		}
	});
}
</script>
```