本帖最后由 香谢枫林 于 2020-3-23 14:11 编辑
最近研究了下JS实现下拉加载数据的操作，写一下分享给大家。
前端页面代码如下，我用的PHP，HTML页面应该就行，主要是在id="ph"的div内加载数据：
[HTML] 纯文本查看 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery.min.js"></script>
<script src="js/test.js?v=<?php echo($_Version_); ?>"></script>
</head>
<body>
<div id="ph" align="center">
<!-- 这里是加载的内容区域-->
</div>
<div align="center">
<img id="img_load" src="http://www.lkhk.life/images/loading.svg" width="60" style="display: none">
</div>
</body>
</html>
js代码功能如下：
[JavaScript] 纯文本查看 复制代码 var num_pages = 50; //总页数，也是拉下加载的次数
var current_page = 1; //当前页数，不能超过总页数
var timers = null; //定义一个定时器
var srcoll_flag = true; // 定义一个开关，等会用来控制多次触发
//初始化页面,页面第一次加载时或者刷新时会执行
window.onload=function(){
page_loadmore(current_page);//默认加载一次图片，这段代码可以不要
};
//监测下拉操作，执行拉下函数加载数据
$(window).scroll(function() {
var scrollTop = $(this).scrollTop(); //浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）
var scrollHeight = $(document).height(); //整个文档高度
var windowHeight = $(this).height(); //浏览器可视窗口高度
if (scrollTop + windowHeight + 60 >= scrollHeight) {
// 此处是滚动条距离底部60px时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
if(srcoll_flag == true){ //检测下拉开关是否打开状态，如果是则执行下拉操作
srcoll_flag = false; //关闭下拉开关
//***********可以定义自己的拉下操作***************
if(current_page <= num_pages){ //如果不是最后一页，则执行下拉参数
$("#img_load").css('display','block'); //显示loading图标提醒加载动作
clearTimeout(timers);
timers = setTimeout(function(){
page_loadmore();// 发现拉下操作，执行下拉函数
},500);
}
//*********************************************
}
}
});
//加载数据函数
function page_loadmore() {
$("#img_load").css('display','none'); //隐藏加载图标，开始加载数据
//***********可以修改为自己的下拉操作函数************
$.getJSON("http://lkhk.life/JBRH/mm.php?jsoncallback=?",{nums:3,sid:Math.random()},function (json) {
for(i in json){
$("#ph").append("<img width='750' src='"+json[i].imagepath+"'><br><p>");
}
});
current_page++;
//***********************************************
clearTimeout(timers); //先清除定时器。执行
timers = setTimeout(function(){
srcoll_flag = true;
},1000); //1秒后再打开下拉开关，防止多次操作，很重要
}
功能描述：每次下拉会加载3张图片。
PS：增加了一个加载提示功能，下拉触发时，显示loading图标，提示即将开始加载，开始加载数据后图标消失。
程序已打包：https://pan.baidu.com/s/1xS0O4445EDcwVNxUO6cSZA 密码:b93q
| 
[复制链接]
发表于 2020-3-22 13:25
|
发表于 2020-3-22 19:06
