A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© mangoboy 中级黑马   /  2018-11-12 00:03  /  895 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 mangoboy 于 2018-11-12 00:07 编辑

html模板核心代码:
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<style>
  ul {
    margin: 0 auto;
    padding: 0;
    width: 300px;
    list-style: none;
  }

  li {
    height: 200px;
  }

  .lazy {
    margin-bottom: 100px;
    width: 300px;
    height: 168px;
    text-align: center;
    line-height: 168px; /*垂直居中*/
  }

    
</style>
<body style="margin: 0 auto;width: 60%;">
  <div>

     <ul id="loading">
    </ul>
    <!-- 记录当前页码 -->
    <input id="page" type="hidden" value="1">
   <ul>
     <li><span id="res" style="color:red;"></span></li>
   </ul>
  </div>
</body>        
</html>

js核心代码如下:
[JavaScript] 纯文本查看 复制代码
<!-- 引入jQuery -->
<!-- 替换成你的本地jquery的路径 -->
<script src="/publc/jquery.min.js"></script>
<script>
$(function() {
  // 初始化,加载第一页数据
  init();
  // 开始编写下啦加载代码啦
  // 第一步 定义stop变量控制是否继续加载
  var stop = true; 

  $(window).scroll(function(){  
      // 第二步 当滚动条离底部100px时开始加载下一页的内容
      if( (parseInt($(window).height()) + parseInt($(window).scrollTop()) + 100) >= parseInt($(document).height())){
          if(stop==true){ 
              stop=false;
              // 第三步 获取当前页码 
              var page = parseInt($("#page").val()) ? parseInt($("#page").val()) : 1;
              // 第四步 下一页
              var page  = page+1;
              // 第五步 发起ajax请求到后台获取数据
              $.post("postdata.php", {page:page},function(res){ 
                  // 第六步 判断后台是否有数据 
                  if (res['code'] > 0) {
                    var html = '';
                    var data = res['data'];
                    for (var i in data) {
                      html += '<li>姓名:'+data[i]['name']+'|年龄:'+data[i]['age']+'岁</li>';
                    }
                    $("#loading").append(html); 
                    $("#page").val(page);
                    stop=true; 
                  } else {
                    // 已经加载完毕,不让再调用ajax
                    stop=false; 
                  }
              },"json"); 
          } else {
            stop=false; 
            $("#res").html("已经加载完毕~~~~~~");  
          }
      } 
  });
//   初始化第一次加载的数据
  function init()
  {
    var page = $("#page").val() ? $("#page").val() : 1;
    // 第一步 发起ajax请求到后台获取数据
    $.post("postdata.php", {page:page},function(res){ 
        //  第二步 判断后台是否有数据 
        if (res['code'] > 0) {
          var html = '';
          var data = res['data'];
          for (var i in data) {
            html += '<li>姓名:'+data[i]['name']+'|年龄:'+data[i]['age']+'岁</li>';
          }
          $("#loading").append(html); 
          $("#page").val(res.page);
          stop=true; 
        } else {
          stop=false; 
          $("#res").html("已经加载完毕~~~~~~"); 
        }
    },"json"); 
  }
});
</script>


服务器端核心代码:
<?php
        // 模拟数据库查询的数据
        $arr = [
                ['name' => '张三', 'age' => 11],['name' => '李四', 'age' => 12],['name' => '王五', 'age' => 13],
                ['name' => '马六', 'age' => 14],['name' => '田七', 'age' => 15],['name' => '八哥', 'age' => 16],
                ['name' => '九妹', 'age' => 17],['name' => '石头', 'age' => 18],['name' => '十一姐', 'age' => 19],
                ['name' => '诸葛亮', 'age' => 20],['name' => '亚瑟', 'age' => 21],['name' => '项羽', 'age' => 22],
                ['name' => '安琪拉', 'age' => 23],['name' => '甄姬', 'age' => 24],['name' => '后羿', 'age' => 25],
                ['name' => '剑圣', 'age' => 26],['name' => '皇子', 'age' => 27],['name' => '狐狸', 'age' => 28],
                ['name' => '妲己', 'age' => 29],['name' => '影流之主', 'age' => 30],['name' => '剑豪', 'age' => 31]

        ];
        // 获取当前的页码,因为我的用的php版本是7.0+,7.0以下用$page = $_POST['page'] ? $_POST['page'] : 1;
        $page = $_POST['page'] ?? 1;
        // 每页显示10条
        $size = 10;
        // 判断要查询的数据的开始下标
        $start = ($page-1)*$size;
        // 初始化要返回的数据
        $res = [
                'code' => -1,
                'data' => [],
                'page' => $page,
        ];
        if ($start < count($arr)) {
                // 根据下标截取数据的部分,模拟我们查询到的数据库数据
                $res['code'] = 200;
                $res['data'] = array_slice($arr,$start,$size); // 此段代码表示从$arr数组中从第$start个开始,取$size个值;
        }
        // 按页码返回对应的图片数据
        echo json_encode($res);exit;

?>

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马