h5列表滚动加载数据很常见,以下分享下今天做的案例:
前言
这个效果实现需要知道三个参数
1. scrollTop — 滚动条距离顶部的高度
2. scrollHeight — 当前页面的总高度(body总高度)
3. clientHeight — 当前可视的页面高度(设备窗口的高度)
html
css
#loading {
height: 32px;
line-height: 32px;
text-align: center;
}
js
//状态标记
var loading = true;
var start = 1;//当前页
var length = 5;//每页条数
//列表滚动加载数据
$(window).scroll(function () {
var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度
var scrollHeight = $(document).height(); //当前页面的总高度
var clientHeight = $(this).height(); //当前可视的页面高度
var totalHeight = parseFloat(clientHeight) + parseFloat(scrollTop);
if (scrollHeight – totalHeight < 40) { 注:-40 上拉加载更灵敏
if (!loading) {
loading = true;
<