インターネットの継続的な発展に伴い、無限スクロールは現(xiàn)代の Web デザインの重要な要素になりました。無限スクロール効果は、ユーザー エクスペリエンスを向上させ、ユーザーが情報をより簡単に取得できるようにし、ユーザーの粘著性を高めるのに役立ちます。この記事では、ThinkPHP6 フレームワークを使用して無限スクロール効果を?qū)g現(xiàn)する方法を紹介します。

1. jQuery フレームワークの紹介

無限スクロールを?qū)g裝する前に、まず jQuery フレームワークを?qū)毪工氡匾ⅳ辘蓼埂?CDN を使用してアクセスを高速化することも、jQuery をローカルにダウンロードしてより安定したアクセスを取得することもできます。

2. 基本的な HTML テンプレートを構(gòu)築する

HTML では、次の構(gòu)造に従ってリストのテンプレートを定義する必要があります。 ,

#infinite-scroll

は、リスト全體をラップするために使用される大きなコンテナーです。 #list はデータを表示するために使用されるコンテナです。 #loading は、読み込みプロンプトを表示するために使用されるコンテナです。

Ajax リクエスト コードの作成

3. 無限スクロールを?qū)g裝する前に、Ajax リクエスト コードを作成する必要があります。これを?qū)g現(xiàn)するには、jQuery の

$.ajax()

メソッドを使用します。 <pre class='brush:php;toolbar:false;'>&lt;div id=&quot;infinite-scroll&quot;&gt; &lt;ul id=&quot;list&quot;&gt; &lt;li&gt;第一條數(shù)據(jù)&lt;/li&gt; &lt;li&gt;第二條數(shù)據(jù)&lt;/li&gt; &lt;li&gt;第三條數(shù)據(jù)&lt;/li&gt; ... &lt;/ul&gt; &lt;div id=&quot;loading&quot;&gt;Loading...&lt;/div&gt; &lt;/div&gt;</pre>リクエストが成功すると、JSON 形式のデータが返されます。

$(data.data)

を通じて返されたデータを取得し、それをデータ コンテナーに追加できます。

無限スクロール効果の実現(xiàn)

ユーザーがリストの一番下までスクロールすると、データに対する Ajax リクエストがトリガーされます。

$(window).scroll()

メソッドを使用して無限スクロール効果を?qū)g現(xiàn)できます: <pre class='brush:php;toolbar:false;'>$.ajax({ url: &quot;/path/to/server&quot;, // 請求的服務(wù)器地址 type: &quot;POST&quot;, // 請求方式 data: {'last_id' : last_id}, // 最后一個數(shù)據(jù)的id dataType: &quot;json&quot;, // 數(shù)據(jù)類型 beforeSend: function () { $(&quot;#loading&quot;).show(); // 顯示加載提示 }, success: function (data) { if(data.status == 200){ // 成功獲取數(shù)據(jù) var html = &quot;&quot;; $(data.data).each(function (index, item) { html += '&lt;li&gt;' + item.title + '&lt;/li&gt;'; }); $(&quot;#list&quot;).append(html); // 將獲取的數(shù)據(jù)追加到列表中 last_id = data.last_id; // 更新最后一條數(shù)據(jù)的id } else { // 數(shù)據(jù)獲取失敗 alert(data.message); } }, complete: function () { $(&quot;#loading&quot;).hide(); // 隱藏加載提示 }, error: function () { alert(&quot;數(shù)據(jù)獲取失敗，請稍后重試&quot;); } });</pre>

無限スクロール効果を?qū)g現(xiàn)するには ThinkPHP6 を使用してください

In ThinkPHP6 フレームワークを使用する場合、データを取得するコントローラーを定義する必要があります。次のコードを參照できます。

$(window).scroll(function () {
    if ($(document).scrollTop() + $(window).height() > $(document).height() - 100) {
        // 檢測用戶滾動到底部
        loadMore();
    }
});

function loadMore() {
    $.ajax({
        url: "/path/to/server",
        type: "POST",
        data: {'last_id' : last_id},
        dataType: "json",
        beforeSend: function () {
            $("#loading").show(); // 顯示加載提示
        },
        success: function (data) {
            if(data.status == 200){
                // 成功獲取數(shù)據(jù)
                var html = "";
                $(data.data).each(function (index, item) {
                    html += '<li>' + item.title + '</li>';
                });
                $("#list").append(html);
                last_id = data.last_id;
            } else {
                // 數(shù)據(jù)獲取失敗
                alert(data.message);
            }
        },
        complete: function () {
            $("#loading").hide(); // 隱藏加載提示
        },
        error: function () {
            alert("數(shù)據(jù)獲取失敗，請稍后重試");
        }
    });
}

コントローラーを定義するときは、まず対応するモデルを?qū)毪?、次にそのモデルを使用してデータベース內(nèi)のデータを取得します。データを取得した後、データを JSON 形式にフォーマットしてフロントエンドに返す必要があります。

概要

6. ThinkPHP6 フレームワークと jQuery を使用すると、無限スクロール効果を簡単に実現(xiàn)できます。 Web サイトで大量のデータを表示する必要がある場合は、無限スクロールが適しています。これにより、ユーザーのクリック操作が減り、ユーザー エクスペリエンスが向上し、ユーザーの保持時間が長くなり、Web サイトのトラフィックの増加が促進されます。

以上がThinkPHP6 を使用して無限スクロールを?qū)g現(xiàn)する方法の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。