本帖最后由 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;
?>
|
|
收藏
淘帖
踩
