無限スクロールのページネーションを実装するための JavaScript と REST API

無限スクロールのページネーションは、Facebook や Twitter などのサイトからインスピレーションを得ています。これは単なるページネーションであり、ユーザーがページの一番下までスクロールすると、さらに多くのコンテンツが読み込まれます。これにより、ユーザーが読めるページ上で常により多くのコンテンツが確保されるため、Web サイトでのユーザー エクスペリエンスが向上します。

無限スクロールのページングを正しく実行する

無限スクロールのページネーションを実装する場合、覚えておくべき非常に重要な点がいくつかあります。

1.重要なリンクを一番下に置かないでください

重要なリンクをページの下部に配置すべきではありません。これは、ユーザーが下にスクロールしてエントリを見つけようとするたびに、新しいエントリのセットが読み込まれるためです。すべての重要なリンクはサイドバーに固定するか、上部に永続的に保持する必要があります。

2.事前に計画を立てましょう

ページネーションをどこに含めるか、そしてそれをどのように処理するかを計画することが重要です。ページネーションを行う一般的な方法は、ページの下部にページ番号をリストすることです。ただし、無限スクロール方式を使用すると、ページ番号は不要になるため、記事リストの最後に表示されなくなります。このページネーションは、フッター セクションに多くの情報を含めない限り、すべてのテーマで使用できます (期待どおりの効果が得られない可能性があります)。

このチュートリアルでは、JavaScript で無限スクロール機能を実装する方法を学びます。

このページには、API から取得される、猫に関する興味深い事実のリストが表示されます。 API はデフォルトで 10 個の興味深い事実を返します。ページの一番下までスクロールすると、アプリの読み込みステータスを示すインジケーターが表示されます。同時に、アプリケーションは API を呼び出して、次の興味深い事実のセットを読み込みます。

この URL を使用して興味深い事実を読み込みます。 API は、どのページをロードするかを API に指示するクエリ文字列 page を受け入れます。

リーリー

それでは、アプリケーションを使用してみましょう。

1. プロジェクト構造の作成

まず、以下のような構成のフォルダーを作成します。

リーリー

2. HTML ファイルをビルドする

HTML ファイルにはいくつかのセクションが含まれます:

1. 興味深い事実のスクロール可能なリスト全体がレンダリングされる コンテナ
2. 引用セクションには興味深い事実が含まれています
3. loader は、興味深い事実をロードするときに表示されます。 loader デフォルトでは非表示です。
リーリー

3.ビルドスクリプト

次に、div を接続し、興味深い事実をロードするスクリプトを作成する必要があります。これを行うには、

querySelector() を使用します。 リーリー

どの項目セットを画面に表示するかを定義するための制御変数も必要です。このコードの制御変数は次のとおりです:

• currentPage: 現在のページは 1 に初期化されます。ページの一番下までスクロールすると、現在のページが 1 ずつ増加し、コンテンツを取得するための API リクエストが行われます。次のページのページ。ページを一番上までスクロールすると、現在のページが 1 ずつ減ります。
• total: この変数には、Fun Facts API によって返された引用の合計数が格納されます。

4. ビルド getFacts 関数

getFactsこの関数は、API を呼び出して興味深い事実を返すことです。 getFacts この関数は単一のパラメータ page を受け入れます。前述の Fetch API を使用して、無限スクロール用のデータを取得します。

Fetch は常に promise を返すため、応答を受信して​​処理するには await-async 構文を使用します。 json データを取得するには、json() 関数を使用します。 getFacts この関数は、JSON を解析して返す Promise を返します。 リーリー

5. ビルド showFacts 関数

興味深い事実を受け取ったので、それをどこに表示できますか?そのため、

showFacts 関数が必要です。 showFacts 関数は、facts の配列を反復処理することで機能します。次に、template Literal 構文を使用して、fact object の HTML 表現を作成します。 リーリー

生成された

blockFact 要素の例は次のとおりです: リーリー

appendChild 関数を使用して、b39bf932957b5bdf7435401b74ada65e 要素をコンテナに追加します。

6.显示和隐藏加载指示器

当用户到达页面末尾时，必须显示加载指示器。为此，我们将引入两个函数：一个用于加载，另一个用于隐藏加载器。我们将使用 opacity: 1 显示加载程序，并使用 opacity: 0 隐藏加载程序。添加和删​​除 opacity 将分别显示/隐藏加载程序。

const hideLoader = () => {
    loader.classList.remove('show');
};

const showLoader = () => {
    loader.classList.add('show');
};

7.查看更多有趣的事实

为了提高性能，我们将引入一个函数来检查 API 是否有更多事实。如果还有更多项目要获取，则 hasMoreFacts() 函数将返回 true。如果没有更多项目可供获取，API 调用将停止。

const hasMorefacts = (page, limit, total) => {
    const startIndex = (page - 1) * limit + 1;
    return total === 0 || startIndex < total;
};

8. 编写 loadFacts 函数代码

loadFacts 函数负责执行这些重要操作：

• 显示或隐藏加载指示器
• 调用 getFacts 函数获取更多事实
• 展示事实

const loadfacts = async (page, limit) => {
    // show the loader
    showLoader();
    try {
        // if having more facts to fetch
        if (hasMorefacts(page, limit, total)) {
            // call the API to get facts
            const response = await getfacts(page, limit);
            // show facts
            showfacts(response.data);
            // update the total
            total = response.total;
        }
    } catch (error) {
        console.log(error.message);
    } finally {
        hideLoader();
    }
};

从某种意义上说，这种实现的一个缺点是它的运行速度。大多数时候您不会看到加载指示器，因为 API 可以很快返回。如果您想在每次滚动时查看加载指示器，可以使用 setTimeout 函数。调整 setTimeout 函数的 delay 将决定加载指示器显示的时间长度。

9. 处理滚动事件

当用户滚动到页面底部时，需要一个scroll事件处理程序来调用loadFacts函数。如果满足以下条件，该函数将被调用：

• 滚动条已到达页面底部
• 还有更多事实需要加载

为了实现滚动事件，我们将使用三个窗口属性：

• window.scrollHeight 给出整个文档的高度。
• window.scrollY 给出了用户滚动文档的距离。
• window.innerHeight 给出可见窗口的高度。

下图更好地概述了上述属性。另外，您将能够理解，如果 innerHeight 和 scrollY 之和等于或大于 scrollHeight，则到达文档末尾，此时必须加载更多有趣的事实。

window.addEventListener('scroll', () => {
    const {
        scrollTop,
        scrollHeight,
        clientHeight
    } = document.documentElement;

    if (scrollTop + clientHeight >= scrollHeight - 5 &&
        hasMoreFacts(currentPage, limit, total)) {
        currentPage++;
        loadFacts(currentPage, limit);
    }
}, {
    passive: true
});

10.初始化页面

无限滚动的最后一步是初始化页面。调用 loadFacts 来加载第一组有趣的事实非常重要。

loadfacts(currentPage, limit);

现场演示

结论

现在，我们在 JavaScript 中实现了一个简单的无限滚动，每当用户滚动时，它将获取并呈现有关猫的有趣事实。这只是无限滚动最常用的方法之一。

以上が無限スクロールのページネーションを実装するための JavaScript と REST APIの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。