22

そのリストの表示可能な部分をロードし、スクロールバーを偽造するだけで巨大なリストを効率的にロードするjavascriptライブラリはありますか？

<div id='container'>
  <!-- Empty but height is set to take up space to fake scrollbar -->
  <div id='hidden-before'></div>      

  <!-- Preloaded in case the user scrolls up -->
  <div id='preload-before'></div>

  <!-- User can see this. Height == #container's height -->
  <div id='viewable-section'></div>   

  <!-- Preloaded in case the user scrolls down -->
  <div id='preload-after'></div>

  <!-- Empty but height is set to take up space to fake scrollbar -->
  <div id='hidden-after'></div>       
</div>

たとえば、Googleドキュメントは大きなテキストドキュメントに対してこれを行います。

注：私が探しているのは、無限スクロールよりも複雑です。無限スクロールは、あなたが一番下に当たるのを待つだけで、スクロールバーを拡大して、より多くのデータをロードします。私が探しているのは、スクロールバーが偽造されているためにすべてのデータがロードされたと思わせるでしょう。あなたが一番下を打ったとき、あなたは実際に私が見せたいリストの終わりを打った。

4

7 に答える 7

14

Clusterize.jsを検討してください

このプラグインはあなたが求めることを正確に行います。

于 2016-03-17T14:42:53.523 に答える
4

これは「無限スクロール」と呼ばれる手法であり、複数のライブラリがサポートしています。jQueryを使用している場合は、以下をご覧ください。

http://www.infinite-scroll.com/

ご存知のように、アイデアは、ユーザーが現在表示できるデータセットの「量」を決定し、その量だけのリクエストを実行することですが、セット全体のサイズに関連してスクロールを設定します。そうすれば、ユーザーが特定のポイントを超えてスクロールすると、データセットの次の部分をリクエストできます。

ExtJSには、コンポーネントベースのフレームワークの一部としてこれもあります。これがグリッドの例です。

于 2012-06-12T02:05:35.623 に答える
4

私は同様の問題に遭遇しました。シナリオは、リストに表示される大きな（〜400以上の要素）がすでにあり、各要素が独自のビューを持つことができるというものでした。これらの要素のDOMの作成、レイアウト、およびペイントは、スクロールするDIV内にリスト全体をレンダリングしようとしたときに必要だったよりも遅くなりました。

私はいくつかの解決策を見ました。

InfinityJS [1]は、リスト項目を含む要素がすでにDOMに追加されている必要があることを除いて、私が望んでいたものにかなり近いものでした。

PaulIrishによるinfinite-scroll [2]も興味深いものでしたが、私が解決する必要のあるものとは異なる特定の問題を解決していました。

MegaList [3]は私が欲しかったものに最も近づきました。Andrew（作成者）は、タッチサポートなどを使用して、最初にモバイル用に設計するという素晴らしい仕事をしました。私にとっての1つの注意点は、厳密な選択リストモデルを想定しているように見え、リストコンポーネントよりも少し多くのことを行うことです。実行する（たとえば、イベントのサイズ変更にバインドし、それを自動的に処理しようとする）。

そこで、iOS UITableViewをモデルにしたベアボーンリストコンポーネントを書き始めました。これはjs-virtual-list-view（vlv:-)と呼ばれます。これは進行中の作業であり、それらに完全に満たされていない同様のニーズがない限り、上記よりもお勧めしません。

ソースはこちらhttps://github.com/shyam-habarakada/js-virtual-list-viewです。

必要な貢献者:-)

[1] http://airbnb.github.io/infinity/

[2] http://www.infinite-scroll.com/

[3] https://github.com/triceam/MegaList

于 2013-07-01T00:22:37.157 に答える
3

cssでオーバーフロー属性を試しましたか？コンテナdivに次のような標準の幅と高さを指定するだけです。

#container {高さ：500px; 幅：500px; オーバーフロー：自動;}

于 2012-06-12T02:06:11.130 に答える
1

この投稿はあなたの質問をカバーし、答えを提示します-http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5

あなたが求めているキラープラグインではありませんが、自分でプラグインを作成する方法を説明するのに大いに役立ちます。

更新：infinity.jsという新しいライブラリがあります。詳細はこちら-https://stackoverflow.com/a/12108015/921259

于 2012-08-07T15:24:04.573 に答える
1

<iron-list>実際にすべてのデータを消費するPolymerの使用を検討できますが、DOMに接続するノードはほんの一握りであり、データバインディングを処理して、ユーザーがスクロールするときに適切なコンテンツを表示します。

以前に使用したことがあり、2000以上のアイテムのカスタムリスト（これらのアイテムも複雑なカスタム要素です）をシームレスにスクロールすると、非常に良い結果が得られました。

私自身は試していませんが、Polymerチームは、他のフレームワークと簡単に組み合わせることができると主張しています。

https://www.webcomponents.org/element/PolymerElements/iron-list

于 2017-08-27T11:15:02.027 に答える
1

大きなリストをスクロールすると、パフォーマンスが低下するのは事実です。display:none;ビューポートに表示されていないすべての要素を設定visibility:hidden;した場合でも、リストをスクロールするとすべての要素が再計算されるため、多少の遅れが生じます。

再計算を回避するには、すべての要素を仮想DOMに移動して、レンダリングされないようにし、一部のプロパティ（高さ/幅など）がデフォルトでに設定されるようにする必要があります0。

Clusterize、ngx-ui-scroll、hyperlistなどの仮想スクロールを処理できるライブラリがいくつかあります。

ただし、動的な行の高さをサポートしていないもの、MITライセンスがないもの、コンテンツリストを操作するための小さな機能を備えているものがあります。そこで、この例のように動的な行の高さを処理できるMVWライブラリを構築することにしました。はい、選択したインデックスに自動的にスクロールするために使用できます。scrollTo(index)

実装は次のようになります

<div sf-controller="large-list">
  <ul class="sf-virtual-scroll">

    <li sf-repeat-this="x in list">
      {{x.id}}
    </li>

  </ul>
</div>

sf.model.for('large-list', function(self){
  self.list = [];

  for(var i = 0; i < 1000; i++){
    self.list.push({id:i});
  }
});

push、、、などのデフォルトの配列関数を使用してsplice、表示されたリストを操作できますpop。

またはここで試してみてください

于 2019-01-22T13:33:50.457 に答える