开发者社区> 吞吞吐吐的> 正文

实现滑动分页(微博分页方式)

简介:
+关注继续查看

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

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

  页面代码Default.aspx:

复制代码
 1 <head runat="server">
2 <title>滑动分页</title>
3 <style type="text/css">
4 #divPaging{width:500px;margin:0 auto;text-align:right;display:none}
5 #divLoading,#divReLoading{width:500px;margin:0 auto;text-align:center;display:none}
6 #divReLoading a{text-decoration:none}
7 #divReLoading a:hover{text-decoration:underline}
8 </style>
9 </head>
10 <body>
11 <form id="form1" runat="server">
12 <div style="border:solid 1px #888;width:500px;margin:0 auto" runat="server" id="div" enableviewstate="false">
13 </div>
14 <div id="divPaging">跳转到第<asp:DropDownList runat="server" ID="ddl" AutoPostBack="true" OnSelectedIndexChanged="ddl_OnSelectedIndexChanged"></asp:DropDownList>页</div>
15 <div id="divLoading">正在加载......</div>
16 <div id="divReLoading">加载失败,<a href="javascript:Reload()">重新加载</a>页面</div>
17 </form>
18 </body>
19 </html>
复制代码

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<obj> list = manager.GetData(pds.FirstIndexInPage, 10);
23 StringBuilder sb = new StringBuilder();
24 foreach (obj item in list)
25 {
26 sb.Append("<div style='height:100px;border-bottom:dotted 1px #322323'>");
27 sb.Append(item.Content);
28 sb.Append("&emsp;");
29 sb.Append(item.User);
30 sb.Append("</div>");
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<obj> list = manager.GetData(this.pds.FirstIndexInPage, 10);
40 StringBuilder sb = new StringBuilder();
41 foreach (obj item in list)
42 {
43 sb.Append("<div style='height:100px;border-bottom:dotted 1px #322323'>");
44 sb.Append(item.Content);
45 sb.Append("&emsp;");
46 sb.Append(item.User);
47 sb.Append("</div>");
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<obj> list = manager.GetData(firstIndexOfPage + (10 * indexOfPage), 10);
22 foreach (obj item in list)
23 {
24 sb.Append("<div style='height:100px;border-bottom:dotted 1px #322323'>");
25 sb.Append(item.Content);
26 sb.Append("&emsp;");
27 sb.Append(item.User);
28 sb.Append("</div>");
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,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
14262 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
24201 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
18413 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
18567 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
17837 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
32634 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
16881 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
13173 0
4852
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载
OceanBase 入门到实战教程
立即下载