手机端-上拉加载分页-阿里云开发者社区

手机端-上拉加载分页

2023-09-16 45

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 手机端-上拉加载分页

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery上拉加载更多</title>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
* {
  margin:0px;
  padding:0px;
}
#header {
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:50px;
  background:#FAA732;
  text-align:center;
  line-height:50px;
  color:white;
  font-weight:bold;
}
#main {
  position:absolute;
  top:50px;
  left:0px;
  right:0px;
  bottom:51px;
  padding:10px;
  overflow:auto;
}
#main li {
  display:flex;
  margin-bottom:10px;
  padding:10px;
  border-bottom:1px solid gray;
  border-radius:4px;
  background:#EEE;
}
#main li img {
  flex:50px 0 0;
  width:50px;
  height:50px;
  padding:4px;
  border:1px solid green;
}
#main li span {
  padding-left:4px;
  line-height:24px;
}
#footer {
  display:flex;
  position:fixed;
  left:0px;
  bottom:0px;
  width:100%;
  height:50px;
  border-top:1px solid gray;
  background:#FAA732;
}
#footer div {
  flex:1;
  text-align:center;
  line-height:50px;
  color:white;
  font-weight:bold;
  border-right:1px solid white;
}
#footer div:nth-child(4) {
  border:none;
}
#footer .active {
  background:#0086FF;
}
</style>
</head>
<body>
<!-- <header id="header">首 页</header> -->
<section id="main">
    <ul id="list_box"></ul>
</section>
<script>
var page = 1, //分页码
    off_on = false, //分页开关(滚动加载方法 1 中用的)
    timers = null; //定时器(滚动加载方法 2 中用的)
//加载数据
// var LoadingDataFn = function() {
//     var dom = '';
//     for (var i = 0; i < 20; i++) {
//         dom += '<li><img src="http://www.jq22.com/img/cs/500x500a.png"/><span>上滑列加载表内容上滑列加载表内容上滑列加载表内容上滑列加载表内容</span></li>';
//     }
//     $('#list_box').append(dom);
//     off_on = true; //[重要]这是使用了 {滚动加载方法1}  时 用到的 ！！！[如果用  滚动加载方法1 时：off_on 在这里不设 true的话， 下次就没法加载了哦！]
// };
//加载数据
var LoadingDataFn = function() {
    var dataat = {
      page: page
    };
    var url = apiUrl + CHECKLOGS;
    sendAjax("GET", url, dataat, 'json',checkLogs,false);  //业务列表
    function checkLogs(res){
      console.log(res)
      if (res.code==200) {
        var data = res.data;
      console.log(page,'45');
      if(page >= 2){
        if(data.data.length==0){
          $(".noMore").remove();
          $(".main").append('<div class="noMore">暂无更多数据</div>');
          return false
        }
      }
        if(data.data.length==0){
        $(".noMore").remove();
          $(".main").html('');
          $(".main").append('<img src="images/null.png" id="null" />');
        }else{
          var str = '';
          $.each(data.data, function(i, v){
            // 字符串拼接
            str += '<div class="list">'+
          '       <div class="nom">'+
          '         <div class="info">'+
          '           <img src="'+v.baby.header+'" />'+
          '           <span>'+v.baby.name+'</span>'+
          '           <span>'+v.baby.relation+'</span>'+
          '           <span>'+v.baby.age+'岁</span>'+
          '         </div>'+
          '         <div class="time">'+v.baby.updated_at+'</div>'+
          '       </div>'+
          '       <div class="article">'+
          '         <div class="row">'+
          '           <div>'+v.baby.card_name+'</div>'+
          '           <div>项目</div>'+
          '         </div>'+
          '         <div class="row">'+
          '           <div>'+v.baby.car_id+'号车</div>'+
          '           <div>车辆</div>'+
          '         </div>'+
          '         <div class="row">'+
          '           <div>'+v.check_num+'</div>'+
          '           <div>数量</div>'+
          '         </div>'+
          '       </div>'+
          '       <div class="verification">'+
          '         <div>'+
          '           核销单号<span class="odd">'+v.order_no+'</span>'+
          '         </div>'+
          '         <div class="ctrl">复制</div>'+
          '       </div>'+
          '     </div>';
          });
          // $('.main').html(''); // 先等空，在赋值
          $('.main').append(str);   
        }
      }else{
        $("#hintBox").html(res.msg);
        $("#hintBox").show().delay(1500).fadeOut();
      };
    }
  // 这里调ajax--放分页数据
  off_on = true; //[重要]这是使用了 {滚动加载方法1}  时 用到的 ！！！[如果用  滚动加载方法1 时：off_on 在这里不设 true的话， 下次就没法加载了哦！]
};
//初始化， 第一次加载
$(document).ready(function() {
    LoadingDataFn();
});
//底部切换
$(document.body).on('click', '#footer div', function() {
    $(this).addClass('active').siblings().removeClass('active');
});
//滚动加载方法1
$('#main').scroll(function() {
    //当时滚动条离底部60px时开始加载下一页的内容
    if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
        //这里用 [ off_on ] 来控制是否加载 （这样就解决了 当上页的条件满足时，一下子加载多次的问题啦）
        if (off_on) {
            //off_on = false;
            //page++;
            //console.log("第"+page+"页");
            //LoadingDataFn();  //调用执行上面的加载方法
        }
    }
});
//滚动加载方法2
$('#main').scroll(function() {
    //当时滚动条离底部60px时开始加载下一页的内容
    if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
        clearTimeout(timers);
        //这里还可以用 [ 延时执行 ] 来控制是否加载 （这样就解决了 当上页的条件满足时，一下子加载多次的问题啦）
        timers = setTimeout(function() {
            page++;
            console.log("第" + page + "页");
            LoadingDataFn(); //调用执行上面的加载方法
        }, 300);
    }
});
//还可以基window窗口（body）来添加滚动事件, (因为布局不同,所以在这里没效果，因为[上面是基于body中的某个元素来添加滚动事的])
$(window).scroll(function() {
    //当时滚动条离底部60px时开始加载下一页的内容
    if (($(window).height() + $(window).scrollTop() + 60) >= $(document).height()) {
        clearTimeout(timers);
        timers = setTimeout(function() {
            page++;
            console.log("第" + page + "页");
            LoadingDataFn();
        }, 300);
    }
});
</script>
</body>
</html>

手机端-上拉加载分页

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

手机端-上拉加载分页

热门文章

最新文章

相关电子书