看新浪微博，人人網都有這樣的效果：滾動條滾動到最下面的時候，新的數據就被自動加載出來了，今天親自嘗試了一下這個效果的實現。
最開始在CSDN上寫了一版，功能比較簡單，今天又增加了一個小功能：翻頁到指定頁數后，自動停止。用戶點擊繼續查看后，再繼續滾動。看看實現吧：
更新核心滾動代碼：
$(window).scroll(function(){ // 當滾動到最底部以上n像素時， 加載新內容 if ($(document).height() - $(this).scrollTop() - $(this).height()<1) { if (!gDataGetAll) { getData(gCurrentPage, gLongitude, gLatitude); } } });
首先，准備一個分頁的存儲過程：
CREATE PROCEDURE proctest @pagesize INT, @pagenumber INT AS SELECT * FROM ( SELECT ROW_NUMBER()OVER (ORDER BY userid)AS ROWNUM,c_name,user_email FROM ehrusers WHERE c_name<>'' ) AS products WHERE ROWNUM BETWEEN @pagesize*(@pagenumber-1)+1 and @pagesize*@pagenumber EXEC dbo.proctest 20, 1
接着，寫一個取數據的C#方法：
//Test public static DataTable GetTable(int pagesize, int pagenum) { string sql = string.Format(@"EXEC dbo.proctest {0}, {1}", pagesize, pagenum); DataSet ds = SqlHelper.ExecuteDataset(ConnString.GetConString, CommandType.Text, sql); if (ds.Tables.Count > 0 && ds.Tables[0].Rows.Count > 0) { return ds.Tables[0]; } else { return null; } }
Ajax請求數據的邏輯，調用剛才的方法，返回JSON：
protected void Page_Load(object sender, EventArgs e) { if (Request.QueryString["pagesize"] != null && Request.QueryString["pagenumber"] != null) { int pagesize = int.Parse(Request.QueryString["pagesize"].ToString()); int pagenumber = int.Parse(Request.QueryString["pagenumber"].ToString()); System.Data.DataTable dt = DB.GetTable(pagesize, pagenumber); string json = Tools.CreateJsonParameters(dt); Response.Write(json); } }
其中用到了一個aspx頁面作為controller。
接下來，就是比較重要的頁面和js代碼了：
頁面：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>滾動測試</title> <style> .mainDiv { width: 800px; border: solid 1px #f00; padding: 10px; } .item { width: 600px; height: 50px; border: solid 1px #00ff90; font-size: 12px; margin: 10px; } .title { font-size: 16px; line-height: 20px; } .content { line-height: 14px; } </style> <script src="Scripts/jquery-1.7.1.js"></script> </head> <body> <h1>滾動測試</h1> <div class="mainDiv"> <!--<div class="item"> <div class="title">title</div> <div class="content">content content content content content content content</div> </div> --> </div> </body> </html>
JS：
<script type="text/javascript">
var gPageSize = 10;
var i = 1; //設置當前頁數，全局變量
$(function () {
//根據頁數讀取數據
function getData(pagenumber) {
i++;//頁碼自動增加，保證下次調用時為新的一頁。
$.get("Ajax.aspx", { pagesize: gPageSize, pagenumber: pagenumber }, function (data) {
if (data.length > 0) {
var jsonObj = JSON.parse(data);
insertDiv(jsonObj.Head);
}
});
}
//初始化加載第一頁數據
getData(1);
//生成數據html，append到div中
function insertDiv(json) {
var $mainDiv = $(".mainDiv");
var html = '';
for (var i = 0; i < json.length; i++) {
html += '<div class="item">';
html += ' <div class="title">' + json[i].ROWNUM + ' ' + json[i].c_name + '</div>';
html += '<div class="content">' + json[i].user_email.replace('lightinthebox', 'sina') + '</div>';
html += '</div>';
}
$mainDiv.append(html);
}
//==============核心代碼=============
var winH = $(window).height(); //頁面可視區域高度
var scrollHandler = function () {
var pageH = $(document.body).height();
var scrollT = $(window).scrollTop(); //滾動條top
var aa = (pageH - winH - scrollT) / winH;
if (aa < 0.02) {//0.02是個參數
if (i % 10 === 0) {//10頁做一次停頓！
getData(i);
$(window).unbind('scroll');
$("#btn_NextPage").show();
} else {
getData(i);
$("#btn_NextPage").hide();
}
}
}
//定義鼠標滾動事件
$(window).scroll(scrollHandler);
//==============核心代碼=============
//繼續加載按鈕事件
$("#btn_NextPage").click(function () {
getData(i);
$(window).scroll(scrollHandler);
});
});
</script>
最終效果：
滾動前：
滾動自動刷新，到第10頁后自動停止，出現鏈接：
大功告成！
第一版請參考我的CSDN blog：
http://blog.csdn.net/dannywj1371/article/details/11899789