我们经常会见到滚动条滑动到底部时会自动加载数据，比如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 }
实现就是这样，之前不会的时候感觉这东西好高大上，会了之后觉得其实也没啥，哈哈