标签：
我们经常会见到滚动条滑动到底部时会自动加载数据，比如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 { 8 width: 280px; 9 margin: auto; 10 } 11 12 .container { 13 margin: auto; 14 margin-top: 10px; 15 } 16 17 .single_item { 18 width: 500px; 19 height: 100px; 20 border: 1px solid #ccc; 21 } 22 23 .nodata { 24 display: none; 25 height: 32px; 26 line-height: 32px; 27 text-align: center; 28 color: #999; 29 font-size: 14px; 30 } 31 </style> 32 <script src="jquery-1.10.2.js"></script> 33 <script type="text/javascript"> 34 //isLoadComplete:防止没有数据了还请求 35 var pi = 0, ps = 10, isLoadComplete = false; 36 $(function () { 37 loadData(); //加载 38 var winHeight = $(window).height(); //浏览器当前窗口可视区域高度 39 $(window).scroll(function () { 40 var pageHeight = $(document.body).height(); //浏览器当前窗口文档body的高度 41 var scrollTop = $(window).scrollTop(); //滚动条top 42 var res = (pageHeight - winHeight - scrollTop) / winHeight; 43 if (res < 0) { 44 loadData(); 45 } 46 }); 47 }); 48 function loadData() { 49 if (isLoadComplete) 50 return; 51 pi++; 52 $.post("/handler.ashx", { pageIndex: pi, pageSize: ps }, function (dataObj) { 53 if (dataObj && dataObj.length > 0) { 54 var htmlStr = ‘‘; 55 for (var i = 0; i < dataObj.length; i++) { 56 htmlStr += "<div class=‘single_item‘>" + dataObj[i] + "</div>"; 57 } 58 $("#container").append(htmlStr); 59 } else { 60 isLoadComplete = true; 61 $(".nodata").show().html("全部数据加载完毕。。。"); 62 } 63 }, "json"); 64 } 65 </script> 66 </head> 67 <body> 68 <div class="container" id="container"> 69 <!--<div class="single_item"> 70 第1个数据 71 </div>--> 72 </div> 73 <div class="nodata"></div> 74 </body> 75 </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 }
其实现就是这样，之前不会的时候感觉这东西好高大上，会了之后觉得其实也没啥，哈哈
标签：
原文地址：http://www.cnblogs.com/zuqing/p/scrollmove_dynamic_loaddata.html
