我們經常會見到滾動條滑動到底部時會自動加載數據，比如QQ空間的查看動態。下面就用一個簡單的Demo來實現
1、首先建一個html文件，代碼如下
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 body { width: 280px; margin: auto; } 8 9 .container { margin: auto; margin-top: 10px; } 10 11 .single_item { width: 500px; height: 100px; border: 1px solid #ccc; } 12 13 .nodata { display: none; height: 32px; line-height: 32px; text-align: center; color: #999; font-size: 14px; } 14 </style> 15 <script src="jquery-1.10.2.js"></script> 16 <script type="text/javascript"> 17 //loadFlag:防止沒有數據了還請求 18 var pi = 1, ps = 10, loadFlag = false; 19 $(function () { 20 loadData(); //加載 21 var winHeight = $(window).height(); //瀏覽器當前窗口可視區域高度 22 $(window).scroll(function () { 23 var pageHeight = $(document.body).height(); //瀏覽器當前窗口文檔body的高度 24 var scrollTop = $(window).scrollTop(); //滾動條top 25 var res = (pageHeight - winHeight - scrollTop) / winHeight; 26 if (res < 0) { 27 loadData(); 28 } 29 }); 30 }); 31 function loadData() { 32 if (loadFlag) 33 return; 34 loadFlag = true; 35 $.post("/handler.ashx", { pageIndex: pi, pageSize: ps }, function (dataObj) { 36 if (dataObj && dataObj.length > 0) { 37 var htmlStr = ''; 38 for (var i = 0; i < dataObj.length; i++) { 39 htmlStr += "<div class='single_item'>" + dataObj[i] + "</div>"; 40 } 41 $("#container").append(htmlStr); 42 loadFlag = false; 43 } else { 44 loadFlag = true; 45 $(".nodata").show().html("全部數據加載完畢。。。"); 46 } 47 pi++; 48 }, "json"); 49 } 50 </script> 51 </head> 52 <body> 53 <div class="container" id="container"> 54 <!--<div class="single_item"> 55 第1個數據 56 </div>--> 57 </div> 58 <div class="nodata"></div> 59 </body> 60 </html>
2、后台是使用的一般處理程序(ashx)，代碼如下：
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.Script.Serialization; 6 7 namespace Demo 8 { 9 /// <summary> 10 /// Handler 的摘要說明 11 /// </summary> 12 public class Handler : IHttpHandler 13 { 14 public void ProcessRequest(HttpContext context) 15 { 16 //不做驗證了 17 var pi = Convert.ToInt32(context.Request.Form["pageIndex"]); 18 var ps = Convert.ToInt32(context.Request.Form["pageSize"]); 19 List<string> list = new List<string>(); 20 //到第4頁停止（模擬沒有數據） 21 if (pi < 4) 22 { 23 //模擬數據 24 for (int i = (pi - 1) * ps + 1; i < pi * ps + 1; i++) 25 { 26 list.Add("第" + i + "個數據"); 27 } 28 } 29 context.Response.Write(new JavaScriptSerializer().Serialize(list)); 30 } 31 32 public bool IsReusable 33 { 34 get 35 { 36 return false; 37 } 38 } 39 } 40 }
還有一種可能情況是等某個元素的滾動條拉到底部去加載數據(一個頁面有兩個滾動條的時候會用到)，這種情況可以使用這個方法
1 //node:jquery元素【$("#id")】 callback:滾動條滾動到底部的時候觸發(這時候請求數據) 2 function nodeScroll(node, callback) { 3 node.scroll(function () { 4 nodeScrollTotalHeigth = node[0].scrollHeight; 5 nodeScrollTop = node[0].scrollTop; 6 nodeHight = node.height(); 7 (nodeScrollTotalHeigth - nodeScrollTop - nodeHight) < 10 && callback(); 8 }); 9 }
實現就是這樣，之前不會的時候感覺這東西好高大上，會了之后覺得其實也沒啥，哈哈