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

antyiwei 发布于2019-08-23 11:35 / 3240人阅读

摘要：一个更佳的方式是，当滚动条距离底部一定距离时，就动态加载更多，向服务端请求资源。代码总页数当前页数滚动条距离底部的距离没有更多了分页列表的接口相关参考页面在滚动条下拉时加载更多内容个人项目经验下拉加载更多实现监听滚动事件不执行

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()监听滚动事件不执行

idc机房托管服务器托管下拉加载更多 js滚动条到最后数据自动加载 asp下拉列表滚动条 js判断滚动条的高度

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97160.html

移动端滚动研究

摘要：还会有一个性能上的问题就是当页面的列表过长，元素过多时，在模拟滚动，下拉刷新这段时间内，页面也会有卡顿现象，这里采取了一个优化策略即列表较长时数量较多时，在触发下拉刷新的时机时将页面视窗之外的元素隐藏或者存放在里面。移动web滚动问题在移动端如果使用局部滚动，意思就是我们的滚动在一个固定宽高的div内触发，将该div设置成overflow:scroll/auto;来形成div内部的...

ghnor 2019-08-23 14:32 评论0 收藏0
H5下拉刷新和上拉加载实现原理浅析

摘要：原文链接前言在移动端网页中，下拉刷新和上拉加载更多数据的交互方式出现频率很高，开源社区也有很多类似的解决方案，如，库等。原文链接：justrockit.top 前言在移动端H5网页中，下拉刷新和上拉加载更多数据的交互方式出现频率很高，开源社区也有很多类似的解决方案，如iscroll，pulltorefresh.js库等。下面是对这两种常见交互基本实现原理的阐述。实现原理下拉刷新...

X1nFLY 2019-08-22 16:23 评论0 收藏0
H5下拉刷新和上拉加载实现原理浅析

摘要：原文链接前言在移动端网页中，下拉刷新和上拉加载更多数据的交互方式出现频率很高，开源社区也有很多类似的解决方案，如，库等。原文链接：justrockit.top 前言在移动端H5网页中，下拉刷新和上拉加载更多数据的交互方式出现频率很高，开源社区也有很多类似的解决方案，如iscroll，pulltorefresh.js库等。下面是对这两种常见交互基本实现原理的阐述。实现原理下拉刷新...

Bmob 2019-08-29 15:04 评论0 收藏0
实现移动端上拉加载和下拉刷新的vue插件(mescroll.js)

摘要：做一个简单的移动端展示项目，后台分页后前端加载，实现上拉加载下一页，找了下，还是用这个插件好一点安装不要使用安装导入在哪个页面使用则在哪个页面导入这里的话，我使用全局导入会出现问题若有错还请大家指出暂时想到的就是局部引入注册组件注册组件做一个简单的移动端展示项目，后台分页后前端加载，实现上拉加载下一页，找了下，还是用这个mescroll.js插件好一点 1.npm安装 npm ins...

hightopo 2019-08-23 11:58 评论0 收藏0
总结开发过程踩到的坑（五）（小程序篇）

摘要：最近开始接触了小程序的开发，由于时间问题，文档阅读的并不完备，也踩了很多坑。的使用微信小程序不支持原生页面跳转，包括和，若要跳转小程序应用内页面，需要使用，详见。参考文献微信小程序开发者文档最近开始接触了小程序的开发，由于时间问题，文档阅读的并不完备，也踩了很多坑。不得不说，微信的野心真是越来越大了，但是它超高的流量注定了它有这个资本。原文地址：mini programs 目...

young.li 2019-08-29 15:38 评论0 收藏0