検索

ホームページ  >  に質問  >  本文

javascript - 空白の DIV 埋め込みメソッドを使用して、リスト データが多すぎる問題を解決するにはどうすればよいですか?

vue でリストページを作成するときに問題が見つかりました。1 つのデータが 1 行を占め、1 画面に約 10 個のデータが表示され、スクロール バーが最後までスクロールすると新しいデータが読み込まれます。ただし、特にデータ量が数万程度になると、HTML 内に DOM ノードが大量に存在することになるため、画面に表示されないデータリストを空の p に置き換えたいと考えています。例えば、HTMLで表示するだけです。画面上に配置できるデータノードは3つで、残りのデータは2psで埋められます。スクロールバーが1画面の高さまでスクロールすると、表示されているデータが入れ替わります( VUE では表示データを制御するために配列が使用されます) を計算して、上部と下部の p の高さの実装方法を見つけます。

漂亮男人漂亮男人2743日前837

全員に返信(4)返信します

  • 大家讲道理

    大家讲道理2017-06-26 10:56:26

    質問の背後にある考え方は理解しています。これは、純粋なフロントエンドの最適化であり、ページ要素の数を制御することは理にかなっています。

    すべてのシナリオがページングに適しているわけではありません。現在、多くのリストはスクロール形式で読み込まれており、スクロールすればするほど、より多くのデータが取得されます。 。

    実装に関しては、質問者さんが言っていることは比較的明確な気がします。 。高さを基準に表示する行を計算するのはOKですが、上下の空白pは必要ない気がします

    返事
    0
  • 女神的闺蜜爱上我

    女神的闺蜜爱上我2017-06-26 10:56:26

    ページネーションなどを作ることは考えていませんか?これをすることに何の意味があるのでしょうか?

    返事
    0
  • 大家讲道理

    大家讲道理2017-06-26 10:56:26

    上記と同様、この場合、ページングの意味は、ページングの書き方よりも完全に大きくなります (segmenfault は、Vue ページング コンポーネントを直接検索します。既製のコンポーネントもありますが、それらは Vue2.0 ではありません)。 おそらく、データ量が非常に少ない場合、別のページング コンポーネントを追加するのは見苦しいと思うかもしれません。

    返事
    0
  • 大家讲道理

    大家讲道理2017-06-26 10:56:26

    やり方がめちゃくちゃな気がするし、大変だし、良くないです。ページングコンポーネントを使用してください。要素にはそれがあります。ページネーションコンポーネント。効果を実感してください

    返事
    0
  • キャンセル返事