js实现 web页面的滚动条下拉时加载更多

141次阅读

共计 1727 个字符,预计需要花费 5 分钟才能阅读完成。

js 实现 web 页面的滚动条下拉时加载更多
在手机上,数据列表的分页都是下拉到底部的时候会加载更多,但是,去年三月份的时候遇到了客户要求 web 页面也要下拉加载更多的需求,于是按照 web 页面在滚动条下拉时加载更多内容(个人项目经验)文中的代码实现了这个下拉加载,很简单的,代码如下:
var totalPages;// 总页数
var pageno = 0;// 当前页数
$(function(){
$(window).scroll(function() {
var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();
var positionValue = (scrollTop + windowHeight) – scrollHeight;
if (positionValue == 0) {
//do something
if (pageno < totalPages – 1) {
pageno++;
doSomething(pageno);
} else {
alert(‘ 没有更多了 ’);
}
}
});
);

function doSomething(pageno) {
var url = “*******”;// 分页列表的接口
var data = {
size: 5,
start: pageno,
};
$.getJSON(url, data, function (rtn) {

});
}
但是,今天测试人员发现,当浏览器缩放了或者屏幕显示设置缩放时,就不能下拉加载了。时隔一年多,真是惊人 @_@
经过调试,发现是有缩放时 positionValue 的值就无法等于 0 了,没法继续加载更多了,这时看到一篇文章下拉加载更多 DEMO(js 实现) 中讲到:
如果等滚动条拉到底部时再加载,会影响用户体验。因为一般动态加载的时候都需要向服务端请求资源,这时需要时间。一个更佳的方式是,当滚动条距离底部一定距离(C)时,就动态加载更多,向服务端请求资源。也就是预加载,预读取。公式如下 this.scrollHeight – C == $(this).scrollTop() + $(this).height()
看完后收到启发,于是将 positionValue 的值设为大于等于 -10,这里的 10 也就是滚动条距离底部一定距离(C)的值。果然,没问题了,有缩放时也可以正常实现下拉加载。
于是,记录下来,分享给大家,共勉。
另外提醒一点,$(window).scroll(function() 监听滚动事件不执行这个问题中的采纳答案提到:
html,body 的高度样式如果设置为 100%,$(window).scroll 方法将检测不到正确的滚出高度(0),导致滚动监听事件失效,设置 html,body{height:auto} 可以解决。
代码
var totalPages;// 总页数
var pageno = 0;// 当前页数
var C = 10;// 滚动条距离底部的距离
$(function(){
$(window).scroll(function() {
var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();
var positionValue = (scrollTop + windowHeight) – scrollHeight;
if (positionValue >= -C) {
//do something
if (pageno < totalPages – 1) {
pageno++;
doSomething(pageno);
} else {
alert(‘ 没有更多了 ’);
}
}
});
);

function doSomething(pageno) {
var url = “*******”;// 分页列表的接口
var data = {
size: 5,
start: pageno,
};
$.getJSON(url, data, function (rtn) {

});
}
相关参考
web 页面在滚动条下拉时加载更多内容(个人项目经验)下拉加载更多 DEMO(js 实现)$(window).scroll(function() 监听滚动事件不执行

正文完
 0