实现滑动分页（微博分页方式）-阿里云开发者社区

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

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

页面代码Default.aspx:

<head runat="server">
    <title>滑动分页</title>
    <style type="text/css">
        #divPaging{width:500px;margin:0 auto;text-align:right;display:none}
        #divLoading,#divReLoading{width:500px;margin:0 auto;text-align:center;display:none}
        #divReLoading a{text-decoration:none}
        #divReLoading a:hover{text-decoration:underline}
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div style="border:solid 1px #888;width:500px;margin:0 auto" runat="server" id="div" enableviewstate="false">
        </div>
        <div id="divPaging">跳转到第<asp:DropDownList runat="server" ID="ddl" AutoPostBack="true" OnSelectedIndexChanged="ddl_OnSelectedIndexChanged"></asp:DropDownList>页</div>
        <div id="divLoading">正在加载......</div>
        <div id="divReLoading">加载失败，<a href="javascript:Reload()">重新加载</a>页面</div>
    </form>
</body>
</html>

Javascript代码：

function $(id) { return document.getElementById(id); }
    var ajax = new AjaxHasPool();
    var method = "get";
    var url = "Handler.ashx?";
    indexOfPage = 1;
    isLoading = false;
    function WhenScroll() {
        if (document.documentElement.scrollTop + document.documentElement.clientHeight > document.documentElement.scrollHeight - 10 && indexOfPage <= 2 && !isLoading) {
            $("divLoading").style.display = "block";
            isLoading = true;
            var pageIndex = $("<%=ddl.ClientID %>").options[$("<%=ddl.ClientID %>").selectedIndex].value;
            ajax.Startup(null, url + "pageIndex=" + pageIndex + "&indexOfPage=" + indexOfPage, method, EP);
        }
    }

    function Reload() {
        if (indexOfPage <= 2 && !isLoading) {
            $("divLoading").style.display = "block";
            $("divReLoading").style.display = "none";
            isLoading = true;
            var pageIndex = $("<%=ddl.ClientID %>").options[$("<%=ddl.ClientID %>").selectedIndex].value;
            ajax.Startup(null, url + "pageIndex=" + pageIndex + "&indexOfPage=" + indexOfPage, method, EP);
        }
    }

    function EP(xmlObj) {
        $("divLoading").style.display = "none";
        if (xmlObj.responseText == "false") {
            $("divReLoading").style.display = "block";
        }
        else {
            if (indexOfPage == 2) {
                $("divPaging").style.display = "block";
            }
            else {
                $("divPaging").style.display = "none";
            }

            $("div").innerHTML += xmlObj.responseText;
            ++indexOfPage;
        }
        isLoading = false;
    }

    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

public partial class _Default : System.Web.UI.Page 
{
    private XMLManager manager = null;
    private PagedDataSource pds = null;

    protected void Page_Load(object sender, EventArgs e)
    {
        
        manager = new XMLManager();
        pds = new PagedDataSource();
        pds.DataSource = manager.GetData(0, 0);
        pds.AllowPaging = true;
        pds.PageSize = 30;
        if (!IsPostBack)
        {
            for (int i = 0; i < pds.PageCount; ++i)
            {
                this.ddl.Items.Add(new ListItem(Convert.ToString(i + 1), Convert.ToString(i)));
            }
            this.ddl.SelectedIndex = 0;
            pds.CurrentPageIndex = 0;
            List<obj> list = manager.GetData(pds.FirstIndexInPage, 10);
            StringBuilder sb = new StringBuilder();
            foreach (obj item in list)
            {
                sb.Append("<div style='height:100px;border-bottom:dotted 1px #322323'>");
                sb.Append(item.Content);
                sb.Append(" ");
                sb.Append(item.User);
                sb.Append("</div>");
            }
            div.InnerHtml = sb.ToString();
        }
    }

    protected void ddl_OnSelectedIndexChanged(object sender, EventArgs e)
    {
        this.pds.CurrentPageIndex = this.ddl.SelectedIndex;
        List<obj> list = manager.GetData(this.pds.FirstIndexInPage, 10);
        StringBuilder sb = new StringBuilder();
        foreach (obj item in list)
        {
            sb.Append("<div style='height:100px;border-bottom:dotted 1px #322323'>");
            sb.Append(item.Content);
            sb.Append(" ");
            sb.Append(item.User);
            sb.Append("</div>");
        }
        this.div.InnerHtml = sb.ToString();
    }

}

说明：

　　1.这里的数据源是xml文件，写了个XmlManager类来操作，代码就不贴上来了。
2.分页用 System.Web.UI.WebControl下的PagedDataSource十分省心，但本次实现没有考虑效率问题所以出现重复操作xml文件的情况，实际项目中应避免哦！注意：用PagedDataSource进行分页要把其属性AllowPaging设为true，不然得不到分页效果。

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

ajax异步请求处理类Handler.ashx

public class Handler : IHttpHandler {

    XMLManager manager = new XMLManager();
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        int pageIndex;
        bool hasPageIndex = Int32.TryParse(context.Request.QueryString["pageIndex"], out pageIndex);
        int indexOfPage;
        bool hasIndexOfPage = Int32.TryParse(context.Request.QueryString["indexOfPage"], out indexOfPage);
        StringBuilder sb = new StringBuilder(200);
        if (hasIndexOfPage && hasPageIndex)
        {
            PagedDataSource pds = new PagedDataSource();
            XMLManager manager = new XMLManager();
            pds.DataSource = manager.GetData(0, 0);
            pds.CurrentPageIndex = pageIndex;
            pds.PageSize = 30;
            pds.AllowPaging = true;
            int firstIndexOfPage = pds.FirstIndexInPage;
            List<obj> list = manager.GetData(firstIndexOfPage + (10 * indexOfPage), 10);
            foreach (obj item in list)
            {
                sb.Append("<div style='height:100px;border-bottom:dotted 1px #322323'>");
                sb.Append(item.Content);
                sb.Append(" ");
                sb.Append(item.User);
                sb.Append("</div>");
            }
        }
        else
            sb.Append("false");
        context.Response.Write(sb.ToString());
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

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

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

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

实现滑动分页（微博分页方式）

热门文章

最新文章

相关电子书