博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
实现滑动分页(微博分页方式)
阅读量:6591 次
发布时间:2019-06-24

本文共 7444 字,大约阅读时间需要 24 分钟。

现在大家都在上微博,而微博的滑动分页引起了我的兴趣,于是自己模仿着做,以下是这段时间的成果(单纯实现,没有考虑到效率和其他细节问题)

  实现内容:以30条记录为一页,每页分三次显示,每当把滚动条拖动到离浏览器底部10px时就显示该页的其余部分,当该页数据全部显示完时就显示页码控件供用户跳转到其他页面。如果数据加载失败,显示重新加载连接,实现用户手动重新加载数据。

  页面代码Default.aspx:

1   2     滑动分页  3       9  10  11     
12
13
14
跳转到第
15
正在加载......
16
加载失败,
重新加载页面
17
18 19

Javascript代码:

1 function $(id) { return document.getElementById(id); }  2     var ajax = new AjaxHasPool();  3     var method = "get";  4     var url = "Handler.ashx?";  5     indexOfPage = 1;  6     isLoading = false;  7     function WhenScroll() {
8 if (document.documentElement.scrollTop + document.documentElement.clientHeight > document.documentElement.scrollHeight - 10 && indexOfPage <= 2 && !isLoading) {
9 $("divLoading").style.display = "block"; 10 isLoading = true; 11 var pageIndex = $("<%=ddl.ClientID %>").options[$("<%=ddl.ClientID %>").selectedIndex].value; 12 ajax.Startup(null, url + "pageIndex=" + pageIndex + "&indexOfPage=" + indexOfPage, method, EP); 13 } 14 } 15 16 function Reload() {
17 if (indexOfPage <= 2 && !isLoading) {
18 $("divLoading").style.display = "block"; 19 $("divReLoading").style.display = "none"; 20 isLoading = true; 21 var pageIndex = $("<%=ddl.ClientID %>").options[$("<%=ddl.ClientID %>").selectedIndex].value; 22 ajax.Startup(null, url + "pageIndex=" + pageIndex + "&indexOfPage=" + indexOfPage, method, EP); 23 } 24 } 25 26 function EP(xmlObj) {
27 $("divLoading").style.display = "none"; 28 if (xmlObj.responseText == "false") {
29 $("divReLoading").style.display = "block"; 30 } 31 else {
32 if (indexOfPage == 2) {
33 $("divPaging").style.display = "block"; 34 } 35 else {
36 $("divPaging").style.display = "none"; 37 } 38 39 $("div").innerHTML += xmlObj.responseText; 40 ++indexOfPage; 41 } 42 isLoading = false; 43 } 44 45 document.documentElement.onscroll = WhenScroll;

说明:

  1.首先要实现监听拖动滚动条事件,那么就要订阅document.documentElement对象的onscroll事件。

      2.这里我实现的是当滚动条离达浏览器底部10px时就读取该页的其余部分,使用onscroll处理函数中的document.documentElement.scrollTop + document.documentElement.clientHeight > document.documentElement.scrollHeight - 10进行判断。document.documentElement.scrollTop表示浏览器垂直方向被卷去的长度,document.documentElement.clientHeight表示浏览器可视工作区的高度(区别于document.body.clientHeight表示内容高度,可能小于等于大于浏览器可视工作区的高度),document.documentElement.scrollHeight表示内容高度。

     3.indexOfPage用于说明请求的是当前页的第几部分数据,因只分3个部分,所以如果indexOfPage>2就表明当前页的数据已经加载完成了,无需加载。当然也可加载完全部数据后把document.documentElement.onscroll设为null,这样就一了百了了。

     4.isLoading用于确保数据加载的顺序,当一个加载未完成时不允许发起下一个加载请求。(这个要注意哦!!)

     5.这里的AjaxHasPool()是自己对ajax封装的函数,使用了简单的对象池,请求并发时效率有所提升(最近还没能抽出时间学jquery等框架,自己写一个勉强用着吧。。。)

 

后台代码Default.aspx.cs

1 public partial class _Default : System.Web.UI.Page  2 {
3 private XMLManager manager = null; 4 private PagedDataSource pds = null; 5 6 protected void Page_Load(object sender, EventArgs e) 7 {
8 9 manager = new XMLManager(); 10 pds = new PagedDataSource(); 11 pds.DataSource = manager.GetData(0, 0); 12 pds.AllowPaging = true; 13 pds.PageSize = 30; 14 if (!IsPostBack) 15 {
16 for (int i = 0; i < pds.PageCount; ++i) 17 {
18 this.ddl.Items.Add(new ListItem(Convert.ToString(i + 1), Convert.ToString(i))); 19 } 20 this.ddl.SelectedIndex = 0; 21 pds.CurrentPageIndex = 0; 22 List
list = manager.GetData(pds.FirstIndexInPage, 10); 23 StringBuilder sb = new StringBuilder(); 24 foreach (obj item in list) 25 {
26 sb.Append("
"); 27 sb.Append(item.Content); 28 sb.Append(" "); 29 sb.Append(item.User); 30 sb.Append("
"); 31 } 32 div.InnerHtml = sb.ToString(); 33 } 34 } 35 36 protected void ddl_OnSelectedIndexChanged(object sender, EventArgs e) 37 {
38 this.pds.CurrentPageIndex = this.ddl.SelectedIndex; 39 List
list = manager.GetData(this.pds.FirstIndexInPage, 10); 40 StringBuilder sb = new StringBuilder(); 41 foreach (obj item in list) 42 {
43 sb.Append("
"); 44 sb.Append(item.Content); 45 sb.Append(" "); 46 sb.Append(item.User); 47 sb.Append("
"); 48 } 49 this.div.InnerHtml = sb.ToString(); 50 } 51 52 }

说明:

  1.这里的数据源是xml文件,写了个XmlManager类来操作,代码就不贴上来了。

2.分页用System.Web.UI.WebControl下的PagedDataSource十分省心,但本次实现没有考虑效率问题所以出现重复操作xml文件的情况,实际项目中应避免哦!注意:用PagedDataSource进行分页要把其属性AllowPaging设为true,不然得不到分页效果。

  3.dropdownlist的选择更改事件是整个页面唯一一个使用非ajax实现的,目的是丢弃之前页面的全部,重新加载一个画面。这点对于我来说教训很大,之前刚学ajax时打算把网站的方方面面都异步处理,结果出现滥用的情况,是页面的javascript代码十分庞大,最后到测试期出现严重的显示问题并且无法找问题根源,这里也包括我对代码的管理等的问题。分清楚哪些地方需要使用ajax请求,那些地方刷新整个页面是十分重要的!!

 

ajax异步请求处理类Handler.ashx

1 public class Handler : IHttpHandler {
2 3 XMLManager manager = new XMLManager(); 4 5 public void ProcessRequest (HttpContext context) {
6 context.Response.ContentType = "text/plain"; 7 int pageIndex; 8 bool hasPageIndex = Int32.TryParse(context.Request.QueryString["pageIndex"], out pageIndex); 9 int indexOfPage; 10 bool hasIndexOfPage = Int32.TryParse(context.Request.QueryString["indexOfPage"], out indexOfPage); 11 StringBuilder sb = new StringBuilder(200); 12 if (hasIndexOfPage && hasPageIndex) 13 {
14 PagedDataSource pds = new PagedDataSource(); 15 XMLManager manager = new XMLManager(); 16 pds.DataSource = manager.GetData(0, 0); 17 pds.CurrentPageIndex = pageIndex; 18 pds.PageSize = 30; 19 pds.AllowPaging = true; 20 int firstIndexOfPage = pds.FirstIndexInPage; 21 List
list = manager.GetData(firstIndexOfPage + (10 * indexOfPage), 10); 22 foreach (obj item in list) 23 {
24 sb.Append("
"); 25 sb.Append(item.Content); 26 sb.Append(" "); 27 sb.Append(item.User); 28 sb.Append("
"); 29 } 30 } 31 else 32 sb.Append("false"); 33 context.Response.Write(sb.ToString()); 34 } 35 36 public bool IsReusable {
37 get {
38 return false; 39 } 40 } 41 42 }

这里就是根据页码和页内索引获取数据,但有其他地方想分享一下:

  1.StringBuilder初始化时可以设定初始容量,这个初始容量对性能有一定的影响,加入输入的内容超过了这个容量,那么stringbuilder对象会扩容为原来容量的1两倍,而扩容会消耗一定的资源,所以设定一个大概的初始容量有利于性能的提高。

  2.一般讲string转化为int32、int64等数值类型时,我都会使用Int32.TryParse方法,就算转化失败都不会抛异常而是返回false,然后再进行具体的if else处理,要知道抛异常是耗资源的。

 

如有更好的实现方法和改进的方式,请大家指教^_^

如果您觉得本文的内容有趣就扫一下吧!捐赠互勉!

本文转自^_^肥仔John博客园博客,原文链接:http://www.cnblogs.com/fsjohnhuang/archive/2011/11/26/2264045.html,如需转载请自行联系原作者

你可能感兴趣的文章
关于MapReduce单词统计的例子:
查看>>
【php】利用php的构造函数与析构函数编写Mysql数据库查询类 (转)
查看>>
导出DLLRegisterServer接口遇到的问题
查看>>
压缩算法
查看>>
ios和android的发展前景比较
查看>>
[转载]SpringMVC的Model参数绑定方式
查看>>
Linux socket多进程服务器框架三
查看>>
Debug.print的用法
查看>>
常用名词
查看>>
计算机硬件常识
查看>>
第一百三十四节,JavaScript,封装库--遮罩锁屏
查看>>
【转】cookie如何共享到各个浏览器
查看>>
自制基于HMM的python中文分词器
查看>>
如何在Root的手机上开启ViewServer,使得HierachyViewer能够连接
查看>>
重写和重载
查看>>
RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2-新增锁定用户与解除锁定用户的功能...
查看>>
vue1.0 的过滤器
查看>>
如何删除anaconda
查看>>
Mybatis3.3——源码阅读笔记
查看>>
oracle中的trunc函数操作
查看>>