vue でリストページを作成するときに問題が見つかりました。1 つのデータが 1 行を占め、1 画面に約 10 個のデータが表示され、スクロール バーが最後までスクロールすると新しいデータが読み込まれます。ただし、特にデータ量が数万程度になると、HTML 内に DOM ノードが大量に存在することになるため、画面に表示されないデータリストを空の p に置き換えたいと考えています。例えば、HTMLで表示するだけです。画面上に配置できるデータノードは3つで、残りのデータは2psで埋められます。スクロールバーが1画面の高さまでスクロールすると、表示されているデータが入れ替わります( VUE では表示データを制御するために配列が使用されます) を計算して、上部と下部の p の高さの実装方法を見つけます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
質問の背後にある考え方は理解しています。これは、純粋なフロントエンドの最適化であり、ページ要素の数を制御することは理にかなっています。
すべてのシナリオがページングに適しているわけではありません。現在、多くのリストはスクロール形式で読み込まれており、スクロールすればするほど、より多くのデータが取得されます。 。
実装に関しては、質問者さんが言っていることは比較的明確な気がします。 。高さを基準に表示する行を計算するのはOKですが、上下の空白pは必要ない気がします
ページネーションなどを作ることは考えていませんか？これをすることに何の意味があるのでしょうか？
上記と同様、この場合、ページングの意味は、ページングの書き方よりも完全に大きくなります (segmenfault は、Vue ページング コンポーネントを直接検索します。既製のコンポーネントもありますが、それらは Vue2.0 ではありません)。 おそらく、データ量が非常に少ない場合、別のページング コンポーネントを追加するのは見苦しいと思うかもしれません。
やり方がめちゃくちゃな気がするし、大変だし、良くないです。ページングコンポーネントを使用してください。要素にはそれがあります。ページネーションコンポーネント。効果を実感してください