星期三, 2018-05-30 20:43 — adminshiping1

首先需要给div加scroll事件，监听滚动条滚动动作。那何时触发加载动作呢？当滚动条滚到底的时候。如何判断滚动条滚到底呢？
当滚动条的高度加上滚动条到div顶部的高度等于div的可滚动高度时，说明滚动条到底部了。公式如下。

this.scrollHeight <= $(this).scrollTop() + $(this).height()

给出一个能跑的demo，需要引入jquery。

<!DOCTYPE=html>  
<html>  
<head>  
<script src="jquery.js" type="text/javascript"></script>  
</head>  
<body>  
    <div>下拉加载更多</div>  
    <div class="main" style="height:700px;overflow:auto;">  
        <div class="child" style='border:1px solid red;margin-top:20px;color:grey;height:800px' ></div>  
    </div>  
</body>  

<script src="jquery-1.11.2.min.js"></script> 
<script  type="text/javascript">  
$(document).ready(function(){  
    $(".main").unbind("scroll").bind("scroll", function(e){  
        var sum = this.scrollHeight;  
        if (sum <= $(this).scrollTop() + $(this).height()) {  
            $(".main").append($(".child").clone());  
        }  
    });  
});  
</script>  
</html>

如果等滚动条拉到底部时再加载，会影响用户体验。因为一般动态加载的时候都需要向服务端请求资源，这时需要时间。一个更佳的方式是，当滚动条距离底部一定距离（C）时，就动态加载更多，向服务端请求资源。也就是预加载，预读取。公式如下。

this.scrollHeight - C <= $(this).scrollTop() + $(this).height()

一个js功能，最后发现其实是个数学问题。最开始看同事写的类似功能的代码式，十分繁琐。当自己总结完这个公式后，思路立刻清晰了。透过现象看本质。

来自 https://blog.csdn.net/cddcj/article/details/72845035

移动端h5列表页上拉加载更多

背景

上星期公司要求做一个回收书籍的h5给安卓用，里面有一个功能是回收记录列表。设计师那边出的稿子是没有要求分页或者是上拉刷新的，但是众所周知，列表页数据很多的情况下，h5加载是很慢的。所以我一开始是想用分页来着，后来想想，谁特么移动端还给分页的，PC做多了，人都做傻了。于是乎就去网上找找插件咯。。。。不找还好，一找各种五花八门的乱七八糟的jq插件，处于不想让项目过于臃肿，于是自己理了一下逻辑，不用插件就实现上拉加载更多

不多说，上代码好了

我来解释一下这个加载的原理，首先第一个红色箭头是回调成功后获取的数据，默认是回调第一页的数据（叫后端给接口的时候要分页），然后把第一页的数据放到data.recordList里面。重点在第二个箭头，我利用的是当 屏幕高度 + 网页被卷去的高 >= 网页正文全文高 的时候，再次调用getList()，就如第一个箭头所见，第一次调用getList的时候page=1，成功回调后page++,所以当我第二次调用的时候就是第二页的内容，把第二页的内容加到第一页上，这样在视觉效果上就形成了一个上拉加载更多的一个样子。然后当翻到最后一页的时候，isEnd就会为true,放在页面最下面的loading.gif就会被除去，再上拉的时候，getList()方法不会进入到ajax里面去获取数据。

来自 https://www.cnblogs.com/Nick-chen/p/6439609.html?utm_source=itdadao&utm_medium=referral

普通分类:

javascript

You are here

手机端移动端下拉加载更多DEMO(纯js实现)

移动端h5列表页上拉加载更多

背景

不多说，上代码好了

友情链接

搜索表单

用户登录

You are here

手机端 移动端下拉加载更多DEMO(纯js实现)

移动端h5列表页上拉加载更多

背景

不多说，上代码好了

友情链接

手机端移动端下拉加载更多DEMO(纯js实现)