毎日30秒⏱ ページ下部かどうかを判断

概要

ページング、最適化、ビジュアル領域、無限ロード
フロントエンドページを書くときに最もよく遭遇する開発要件の1つは、バックエンドデータが返すデータオブジェクトをレンダリングすることであり、データオブジェクトの数が非常に多い場合にページングする必要があります.
一般的なページング方法は3つあります.

は、ページ下部に 、 、 のボタンを生成する.

ユーザーは、自分が閲覧するページを直接選択することができます.

ページデータが多すぎることによるカートンの心配はありません.

は よりややスマートではありません.

は、ページ下部に ボタンを生成する.

ページの下部に対してページ関連ボタンを生成することは、

を体験することができる.

ユーザは、より多くのデータをロードする必要があるかどうかを制御することができる.

は よりややスマートではありません.

ページデータが多すぎることによるカートンに注意する必要があります.

ユーザがページの下部にスクロールするとき .

は、ユーザーの直感的な体験に合っています.

ページデータが多すぎることによるカートンに注意する必要があります.

フッターに他のデータがある場合、ユーザーはフッターを表示するためにデータをめくる必要があります.

もちろん、ページングには絶対的な銀弾はなく、状況に応じてわずかな調整とクロスコーディネートを行い、ページング方式を使用します.例えば、ページフッターにユーザが表示する必要があるデータがある場合、 を使用して、2〜3ページのロード時に ボタンを提示することで、特定のユーザがフッターの内容がより多くの場合、一つ一つ列挙しないようにすることができる.
ページデータが多すぎることによるカートンは、毎日30秒のchunkで与えられたシナリオ例を参照して、 を用いてDOMノードを低減し、ページカートンを最適化することができ、ここでは、ページングおよびそれに関連する最適化は議論されない.
今日共有されるコードは、ページング中に使用される関数 です.

//        https://30secondsofcode.org
const bottomVisible = () =>
  document.documentElement.clientHeight + window.scrollY >=
  (document.documentElement.scrollHeight || document.documentElement.clientHeight);

コード解析

および は、現在のページの位置を取得する.

document.documentElement.clientHeight + window.scrollY

さらに と比較してページ下部に到達したか否かを判断し、 が存在しなければ を用いて代替する.

... >= (document.documentElement.scrollHeight || document.documentElement.clientHeight)

テクニック:利用||テクニックでデータを初期化

シーンの操作

無限ロードデータ項目のページング機能を行い、ページが下部に達したときにデータロードを行います.

//       
document.addEventListener('scroll', () => {
    //         
    if(bottomVisible()) {
        // 1.          
        // 2.       
    }
});

類似コード

ページ上部に到達したかどうかを判断

const topVisible = () => window.scrollY == 0

共に成長する

困った町には肩を並べて同行する人が欠かせない. 一緒に成長させましょう.

もっと多くの人に文章を見せたいなら、 を注文してください.

小二を励ましたいなら、Githubに をあげることができます.

小二ともっと交流したいなら、微信m353839115を追加してください.

本稿の原稿はPushMeTopから