当前位置:Gxlcms > JavaScript > js如何实现页面的滚动条下拉时加载更多(附代码)

js如何实现页面的滚动条下拉时加载更多(附代码)

时间:2021-07-01 10:21:17 帮助过:7人阅读

本篇文章给大家带来的内容是关于js如何实现页面的滚动条下拉时加载更多(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

在手机上,数据列表的分页都是下拉到底部的时候会加载更多,但是,去年三月份的时候遇到了客户要求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) {
                
        });
}

相关推荐:

jQuery向下滚动即时加载内容实现的瀑布流效果,jquery向下滚动

js实现滚动条滚动到页面底部继续加载_javascript技巧

以上就是js如何实现页面的滚动条下拉时加载更多(附代码)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行