插播一条广告:软件设计师考试系统,送给需要参加软考的朋友们。
本人自己开发的网址:
http://94.191.14.138:8025/Html/Customer/Main.html#/Index
标题:做项目的时候正好遇到下拉加载的问题,正好抽时间研究了一下,借此分享给大家。
对瀑布流/下拉加载的个人理解:实际上就是触发scroll事件,ajax向后台请求数据,然后动态加载出来(类似于分页加载,换汤不换药)。我所研究的是基于jquery例子。话不多说,先上代码,然后再分析。
1、核心代码
$(window).scroll(function () {
var scrollerh = $(document).scrollTop();
alert(scrollerh);
var viewbody = $(window).height();
var allbody = $(document).height();
if (scrollerh + viewbody > allbody - 100) {
alert("加载啊")
}
})
var scrollerh = parseInt($(window).scrollTop()) :获得的是滚动条的高度。
var viewbody = $(window).height(); :获得当前窗体可视区域的高度。
var allbodyheight = $(document).height(); :获得整个文档的高度。
if (scrollerh + viewbody > allbody - 100) :当满足这个条件时就执行alert("加载啊")这个语句,当然我们想要实现下拉加 载的功能也就是在这里实现,添加加载数据的代码,后面将说明。
2、看完了核心代码,接下来就是实例说明了,用到的方法有ajax,相信大家都已经了解,不多介绍。老规矩,先上代码:
<style>
table,tr,td{
border:1px solid #000;
border-collapse:collapse;
}
tr{
height:50px;
}
td{
width:auto;
}
.loadingclass {
position:fixed;
height:200px;
width:200px;
left:50%;
top:50%;
margin-top:-100px;
margin-left:-100px;
display:none;
}
</style>
<script>
//存储后台获得的数据
var storearr = new Array();
var indexpage = 1;
var pagecount = 10;
var mark = 1;
var flag = true;
$(function () {
$(".loadingclass").css("display", "block");
Getdatasource();
//ajax后台获得数据
function Getdatasource() {
storearr.length = 0;
$.ajax({
url: "/KQ/GetBackData",
type: "post",
dataType: "json",
async: true,
data: {
val0: indexpage,
val1:pagecount
},
success: function (jsonResult) {
//if (jsonResult != null) {
// $(".loadingclass").css("display", "none");
//}
//解析后台json
$.each(jsonResult, function (index, value) {
var arr = new Array();
for (var x in value) {
arr.push(value[x]);
}
storearr.push(arr);
})
CreateTable();
}
});
}
//动态生成表格
function CreateTable() {
$(".loadingclass").css("display", "none");
for (var i = 0; i < storearr.length; i++) {
var trclass = "maintr" + mark;
var tdyy = "." + trclass;
$("#maintable").append("<tr class=" + trclass + "></tr>");
for (var k = 0; k < storearr[i].length; k++) {
$(tdyy).append("<td>" + storearr[i][k] + "</td>");
}
mark++;
}
$(".loadingclass").css("display", "none");
}
//滑动加载,实现动态加载
$(window).scroll(function () {
var scrollh = parseInt($(window).scrollTop());
var currentview = $(window).height();
var allbodyheight = $(document).height();
if (scrollh + currentview > allbodyheight - 100 && flag == true) {
$(".loadingclass").css("display", "block");
indexpage++;
flag = !flag;
Getdatasource();
setTimeout(function termer() {
flag = !flag;
}, 3000)
}
})
})
</script>
<div>
<table id="maintable">
<tr>
<td>序号</td>
<td>姓名</td>
<td>签到顺序</td>
<td>日期</td>
<td>上班时间</td>
<td>早上时间</td>
<td>下午时间</td>
<td>上午打卡时间</td>
<td>下午打卡时间</td>
<td>其他1</td>
<td>其他2</td>
<td>其他3</td>
<td>其他4</td>
<td>其他5</td>
<td>其他6</td>
<td>办公室</td>
</tr>
</table>
</div>
<div class="divzw">
</div>
<div class="loadingclass">
<img src="~/img/loading.gif"/>
</div>
首先是样式表,只说一个.loadingclass,这个是一个gif加载图形,当数据没有完全加载成功时出现正在加载图案。其实就是为了好看,不用也行。
重点说说script,首先需要引用jquery。Getdatasource()函数的作用是通过ajax向后台请求数据。CreateTable()方法是根据Getdatasource()获得数据动态生成table。 $(window).scroll()事件是用来触发滚动条事件的,里面加了一个settimeout事件,是为了防止多次加载。所以加了时间限制。如果去掉的话,也可以下拉加载,可能一次性会加载几百条,大家可以尝试尝试。
最后加上我的实现图片,没有样式,哈哈哈哈
大家如果有疑问,欢迎留言,我将及时解答。