前台页面的js代码如下:
<script type="text/javascript">
$(function () {
var count = 10;
var start = 0;
function initPage() {//初始化页面
$.getJSON("Handler/Handler.ashx", { action: "GetMoreNews", count: count, start: start }, function (json) {
var str = "";
$.each(json, function (index, array) {
var str = "<div class='single_item'>"
+ "<div class='element_head'>"
+ "<div class='author'>" + array['Title'] + "</div>"
+ "<div class='date'>" + array['Date'] + "</div>"
+ "</div>"
+ "<div class='content'>" + array['Contents'] + "</div>"
+ "</div>";
$("#container").append(str);
});
});
}
initPage();
$("#nodata").hide();
var winH = $(window).height(); //页面可视区域高度
$(window).scroll(function () {
var pageH = $(document.body).height();//页面总高度
var scrollT = $(window).scrollTop(); //滚动条top
var aa = (pageH - winH - scrollT) / winH;
if (aa < 0.02) {
$.getJSON("Handler/Handler.ashx", { action: "GetMoreNews", count: count, start: start + 10 }, function (json) {
if (json!="") {
var str = "";
$.each(json, function (index, array) {
var str = "<div class='single_item'>"
+ "<div class='element_head'>"
+ "<div class='author'>" + array['Title'] + "</div>"
+ "<div class='date'>" + array['Date'] + "</div>"
+ "</div>"
+ "<div class='content'>" + array['Contents'] + "</div>"
+ "</div>";
$("#container").append(str);
});
start = start + 10;
} else {
$("#nodata").show().html("别滚动了,已经到底了。。。");
return false;
}
});
}
});
});
</script>
关于Handler页面的代码,里面包含了存储过程和方法,可以看我的asp.net点击‘查看更多’实现无刷新加载这篇文章,我大体解释一下上面代码的意思。首先定义了一init函数,用来首次加载初始化用的,页面首次加载时就显示前十条信息,scroll方法同init方法,当滚动条快到页面底部时即触发了window对象的scroll方法,这时count=10,而start=start+10=10了,当滚动条快到页面底部时就调用自身的scroll方法,
前台的html代码很简单
<div id="container"></div>
<div id="nodata"></div>
效果图如下: