话不多说，直接码上。

<div>

<div>展示内容列表块</div>

//now当前页数 num总页数这些需要在列表初始化的时候计算好，并赋值给此属性

<div class="caseud" now="1" num="2">
<a href="javascript:;">加载更多</a>
</div>

</div>

<script type="text/javascript">

//记录状态
var normalState=true;
//滚动条滚动的时候
$(window).scroll(function(){
//获取当前加载更多按钮距离顶部的距离
var bottomsubmit = $('.normalCaseud').offset().top;
//获取当前页面底部距离顶部的高度距离
var nowtop = $(document).scrollTop()+$(window).height();
//获取当前页数，默认第一页
var now = $('.normalCaseud').attr('now');
//获取总页数，PHP分页的总页数
var num = $('.normalCaseud').attr('num');
//当当前页面的高度大于按钮的高度的时候开始触发加载更多数据
console.log(bottomsubmit,nowtop);
if(nowtop>bottomsubmit){
   console.log("加载更多");
   //如果为真继续执行，这个是用于防止滚动获取过多的数据情况
   if(state==true){
       //执行一次获取数据并停止再进来获取数据
       state=false;

       setTimeout(function(){
           //当前页数++
           now++;
            //记录当前为第二页
           $('.normalCaseud').attr('now',now);
            $.ajax({
                //通过ajax传页数参数获取当前页数的数据,ajax_more_case.php代码参考php分页功能
               url:'url',
               type:'GET',
               cache:false,
               dataType:"html",
               success:function(data){
                   //把通过php处理的html和数据，写入容器底部
                   $('.case').append(data);
                   //如果当前页大于等于总页数就提示没有更多数据

高能注意！！！！

如果当前页是从0开始的，这里就不变，

/如果是当前页是从1开始,这里就需要换成（now>num)
                   if(now>num){
                       $('.normalCaseud a').text('没有更多数据');
                       //并把状态设置为假，下次下滑滚动时不再通过ajax获取数据
                       state=false;
                    }else{
                        //否则继续
                         state=true;
                   }
               },
                error:function(){
                   $('.normalCaseud a').text('加载错误,请刷新页面！');
               }
           });
       },500);
   }
}
});

</script>

注意：

normalState（全局变量）：此变量需要在刷新列表时进行初始化（true）。

加载更多：底部提示语也需要在刷新列表的时进行初始化，效果会好一点。

看完是不是感觉简单又很实用哎。

jQuery实现简单实用的H5(手机端)下拉分页加载（所谓的懒加载！！！）相关推荐

Bootstrap手机端下拉菜单（铺满）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
html手机端下拉菜单代码,jQuery手机移动端下拉列表选择代码
js代码 $(function(){ $('.retrie dt a').click(function(){ var $t=$(this); if($t.hasClass('up')){ $(&quo ...
js手机端下拉刷新
var startY = 0; //手指起始坐标 var moveY = 0; //手指移动的坐标 var moveDistance = 0;//手指移动的距离 document.addEventLi ...
js手机端下拉刷新效果demo效果示例（整理）
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...
移动端html5广告的优势,h5手机端开发的优势都有哪些呢
原标题:h5手机端开发的优势都有哪些呢现在是手机不离手的时代,可以说每个人都有一部甚至两部手机来打发日常的空余时间,那么你知道h5手机端开发的优势都有哪些吗?下面原创先锋小编给大家详细介绍下,想要了 ...
2021年最新开运算命网运势测算带塔罗牌含H5手机端整站PHP源码
源码介绍 2021年最新开运算命网运势测算带塔罗牌含H5手机端整站PHP源码,这个开运网源码前一阵子流行过一段时间,各大论坛也都陆陆续续发过一些,但是大部分不是不完整就是支付只有官方接口,用起来成本高 ...
android H5手机端锁屏自动定位问题
关于Android H5手机端后台自动上报定位信息的那点事手机上的几个重要操作方法一:使用原生android进行定位(uni-app) 方法二:使用jswork保持后台运行手机上的几个重要操作 ...
h5手机端浏览器机制_H5测试介绍
优势: 1.H5可以跨平台,开发成本相对较低: 2.H5可随时上限就更新版本,适合快速迭代: 3.H5可以轻量的触达用户,提供更快捷的服务: 4.在微信入口或者浏览器上,用户只需点开链接就可以获取我们 ...
h5、select下拉框右边加图标，深度美化页面增进用户体验
h5.select下拉框右边加图标,深度美化页面增进用户体验 1.那么我们先来看一下效果吧! 2.再看看h5的结构: <div id="login-div"><d ...

jQuery实现简单实用的H5(手机端)下拉分页加载（所谓的懒加载！！！）

话不多说，直接码上。

注意：

jQuery实现简单实用的H5(手机端)下拉分页加载（所谓的懒加载！！！）相关推荐

最新文章

热门文章

jQuery实现简单实用的H5(手机端)下拉分页加载（所谓的懒加载！！！）

话不多说，直接码上 。

注意：

jQuery实现简单实用的H5(手机端)下拉分页加载（所谓的懒加载！！！）相关推荐

最新文章

热门文章

话不多说，直接码上。