zoukankan      html  css  js  c++  java
  • ASP.NET MVC3 利用滚动条加载数据

      滚动条加载数据是当前比较流行的分页方式。

      操作方式:根据滚动条的当前位置来加载更多的数据。

      主要有2种形式。

      1:边滚动边加载数据,一开始把容器的高度计算好,当滚动条移动到空白位置时加载更多的数据。类似于 http://qing.blog.sina.com.cn/tag/%E6%97%B6%E5%B0%9A

      2:滚动到底部加载数据,当滚动条移动到底部时加载更多的数据。类似于“百度图片”的效果。

      它的优点:可以利用滚轮进行分页,而不需要点击按钮,方便用户快速地浏览完整的信息,不用经常点击分页按钮。在手机端的效果特别明显。

      它的缺点:对于想快速查看某些数据时不是很方便,假如用户想查看靠后的数据时,需要先加载前面的所有数据才能找到想要的数据。

      

      实现方式:利用 ASP.NET MVC + Jquery 框架比较容易实现这种效果(由于本人最近都没有使用 WEBFORM ,比较生疏,就不拿出来献丑)

      

      已滚动到底部加载数据为例子说明,这个实现起来比较容易。  

      html 部分,div : Container 控制滚动条的容器,div : DataList 加载数据的容器。 Container 需要 加上 height: 420px;overflow-y: auto; 样式

      JS 部分,主要是针对 Container容器的滚动条进行操作,判断是否去掉底部。
    可使用 $("#Container")[0].scrollTop + $("#Container").height() >= $("#Container")[0].scrollHeight - 10,关于这几个属性的详细说明请自行在网络上查看,
    需要说明的是  -10 主要是为了兼容chrome 浏览器,不同浏览器对滚动条的属性解析会不同,如果列表样式过于复杂,需要反复调试。    

     1 function Add_Data() {
     2     var scrollTop = $("#Container")[0].scrollTop;
     3     if (!complete && loaded) {
     4         if (scrollTop + $("#Container").height() >= $("#Container")[0].scrollHeight) {
     5             getData();
     6         }
     7 
     8     }
     9 }
    10 
    11 function getData() {
    12     loaded = false;
    13     $.ajax({
    14         url: '@Url.Action("MainListPanel", "Home")',
    15         type: 'POST',
    16         data: {
    17             createTime: maxTime,
    18             skipCount: skipCount,
    19             takeCount: takeCount
    20         },
    21         dataType: 'html',
    22         timeout: 10000,
    23         error: function () { alert('Error loading'); },
    24         beforeSend: function () {
    25             //$("#DataList").append("<img class='loading' src='../../Content/ajaxloading.gif' />");
    26             $("#box").show();
    27         },
    28         success: function (result) {
    29             loaded = true;
    30             $("#box").hide();
    31             //$(".loading").remove();
    32             $("#DataList").append(result);
    33             count++;
    34         }
    35     });            
    36 }
    View Code

      服务器端 部分,主要是利用 linq 强大的 OrderByDescending,skip 和 take 方法,把已经加载过的数据过滤掉。

     下载源码

  • 相关阅读:
    110、抽象基类为什么不能创建对象?
    109、什么情况会自动生成默认构造函数?
    108、如果想将某个类用作基类,为什么该类必须定义而非声明?
    107、类如何实现只能静态分配和只能动态分配
    106、C++中的指针参数传递和引用参数传递有什么区别?底层原理你知道吗?
    hdoj--2036--改革春风吹满地(数学几何)
    nyoj--46--最少乘法次数(数学+技巧)
    vijos--P1211--生日日数(纯模拟)
    nyoj--42--一笔画问题(并查集)
    nyoj--49--开心的小明(背包)
  • 原文地址:https://www.cnblogs.com/geass/p/3134295.html
Copyright © 2011-2022 走看看