ThinkPHP6 を使用して無限スクロールを実現する方法

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

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

無限スクロールを実装する前に、まず jQuery フレームワークを導入する必要があります。 CDN を使用してアクセスを高速化することも、jQuery をローカルにダウンロードしてより安定したアクセスを取得することもできます。

2. 基本的な HTML テンプレートを構築する

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

#infinite-scroll

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

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

3. 無限スクロールを実装する前に、Ajax リクエスト コードを作成する必要があります。これを実現するには、jQuery の

$.ajax()

メソッドを使用します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'>&lt;div id=&quot;infinite-scroll&quot;&gt; &lt;ul id=&quot;list&quot;&gt; &lt;li&gt;第一条数据&lt;/li&gt; &lt;li&gt;第二条数据&lt;/li&gt; &lt;li&gt;第三条数据&lt;/li&gt; ... &lt;/ul&gt; &lt;div id=&quot;loading&quot;&gt;Loading...&lt;/div&gt; &lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>リクエストが成功すると、JSON 形式のデータが返されます。

$(data.data)

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

無限スクロール効果の実現

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

$(window).scroll()

メソッドを使用して無限スクロール効果を実現できます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:jquery;toolbar:false;'>$.ajax({ url: &quot;/path/to/server&quot;, // 请求的服务器地址 type: &quot;POST&quot;, // 请求方式 data: {'last_id' : last_id}, // 最后一个数据的id dataType: &quot;json&quot;, // 数据类型 beforeSend: function () { $(&quot;#loading&quot;).show(); // 显示加载提示 }, success: function (data) { if(data.status == 200){ // 成功获取数据 var html = &quot;&quot;; $(data.data).each(function (index, item) { html += '&lt;li&gt;' + item.title + '&lt;/li&gt;'; }); $(&quot;#list&quot;).append(html); // 将获取的数据追加到列表中 last_id = data.last_id; // 更新最后一条数据的id } else { // 数据获取失败 alert(data.message); } }, complete: function () { $(&quot;#loading&quot;).hide(); // 隐藏加载提示 }, error: function () { alert(&quot;数据获取失败，请稍后重试&quot;); } });</pre><div class="contentsignin">ログイン後にコピー</div></div>

無限スクロール効果を実現するには 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){
                // 成功获取数据
                var html = "";
                $(data.data).each(function (index, item) {
                    html += '<li>' + item.title + '</li>';
                });
                $("#list").append(html);
                last_id = data.last_id;
            } else {
                // 数据获取失败
                alert(data.message);
            }
        },
        complete: function () {
            $("#loading").hide(); // 隐藏加载提示
        },
        error: function () {
            alert("数据获取失败，请稍后重试");
        }
    });
}

コントローラーを定義するときは、まず対応するモデルを導入し、次にそのモデルを使用してデータベース内のデータを取得します。データを取得した後、データを JSON 形式にフォーマットしてフロントエンドに返す必要があります。

概要

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

以上がThinkPHP6 を使用して無限スクロールを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。