代码之家  ›  专栏  ›  技术社区  ›  jcuenod

伪连续滚动

  •  2
  • jcuenod  · 技术社区  · 15 年前

    我想在没有多个“页面”的情况下显示大量结果,以便在第1页加载结果“0-99”,在第2页加载结果“100-199”,在第3页加载结果“200-299”,等等。

    因此,我的想法是创建一种伪连续滚动数据列表。因此,本质上,数据将根据需要加载,但只有在滚动到时才加载。然后,数据框将需要有一个逻辑类型的滚动条(我不确定在这一点上我将如何做到这一点-也许只是用箭头)。此外,如果加载了大量数据,那么我认为需要从内存中清除旧数据,以免杀死浏览器。在客户端使用jquery(或任何javascript)和php在web界面中如何实现这一切

    4 回复  |  直到 15 年前
        1
  •  2
  •   Uldeim    15 年前

    Ben Nadel在他的博客上使用JQuery做了类似的事情(当然是用CF,不是PHP,但服务器端代码很短)。

    http://www.bennadel.com/blog/1803-Creating-A-Bidirectional-Infinite-Scroll-Page-With-jQuery-And-ColdFusion.htm

    Ben实现的好处在于它清除了你滚动过去的内容。。。这意味着您不会遇到无限DOM问题。

        2
  •  1
  •   prodigitalson    15 年前

    当你进入它时,它可能会变得相当复杂,但基本上是这样的…:

    // PSEUDO CODE
    $(document).ready(function(){
      $('#datascroller').scroll(function(){
          var tbl = $('table', this);
          var $this = $(this);
          if($('td:last', tbl).scrollTop() == tbl.height()*-1)
          {
             //clear current data and display loading animation
             tbl.fadeOut('fast', function(){
                $(this).replaceWith(loadingAnimationElement.hide());
                loadingAnimationElement.fadeIn('fast');
                $.get('/phpscript.php', {page: 2}, function(results){
                   var $data = $(results).hide();
                   loadingAnimationElement.fadeOut('fast', function(){
                      $(this).replaceWith($data);
                      $data.fadeIn('fast');
                   })
                });
             });
          }
      });
    });
    
        3
  •  0
  •   Jarrett Meyer    15 年前

    SortFolio ? 你可以绑定到 scroll event 使用jQuery就像使用其他任何查询一样。然后,您将看到一系列XMLGET请求以引入数据,并根据滚动是向上还是向下,追加或预先添加列表。

        4
  •  0
  •   GalacticCowboy    15 年前

    jQuery Tools has a demo of their Scrollable widget 听起来有点像你所描述的。