2

これは私のブログです: http://9gago.blogspot.com/これは bloggger/blogspot から作成されたブログです ユーザーが毎回古い投稿をクリックする必要がないように、スクロールダウンすると古い投稿が読み込まれるこの機能が必要ですページの最後の投稿に到達します。http://9gag.com/または以前はそれを行っていたサイトです。

4

1 に答える 1

3

私はあなたが好きかもしれない1つの実装を持っています. これを行う方法はいくつかあり、さらにいくつかのバリエーションがあります。

まず、グリッドに表示するデータのキーをどこかに保存する必要があります。これは、本質的にシーケンシャルなキーを持っていることを前提としています。自動インクリメント整数が機能します。

グリッドのマークアップは次のようになります。

<div class="content" id="7">some stuff</div>
<div class="content" id="8">another row of stuff</div>
<div class="content" id="9">another row of stuff</div>

次に、データの次のバッチも取得する「読み込み中」アイコンを表示する関数が必要です。グリッドの最後の要素の ID を使用して、次の 20 行 (または任意の行数) のデータを取得するクエリをサーバー側で実行します。

function lastRow()
{
    $('div#lastRowLoader').html('<img src="spinner.gif"/>');
    $.post('dataUrl?action=getNextRows&lastId=' + $('.content:last').attr('id'), 
      function(data){
          if (data != '') {
             $('.content:last').after(data);           
          }
          $('div#lastRowLoader').empty();
      });
  };

次に、ユーザーを検出する最後の関数がページの最後までスクロールされました。

$(window).scroll(function(){
    if  ($(window).scrollTop() == $(document).height() - $(window).height()){
      lastRow();
    }
});

明らかに、DOM を介してページにデータをロードするためにポストの戻り値を取得するためのコードが必要です。このコードは、何を行う必要があるかを概念的に示すために作成しました。マークアップは異なり、グリッドは Sencha Ext JS から手巻きのものまで何でもかまいません。

うまくいけば、これで車輪を回すのに十分です。

于 2012-02-03T02:11:00.223 に答える