So erreichen Sie unendliches Scrollen mit ThinkPHP6

Mit der kontinuierlichen Entwicklung des Internets ist Infinite Scroll zu einem wichtigen Element des modernen Webdesigns geworden. Der Endlos-Scroll-Effekt kann dazu beitragen, die Benutzererfahrung zu verbessern, es Benutzern zu ermöglichen, einfacher an Informationen zu gelangen, und die Benutzerbindung zu erhöhen. In diesem Artikel wird erläutert, wie Sie mit dem ThinkPHP6-Framework einen unendlichen Scrolleffekt erzielen.

1. Einführung in das jQuery-Framework

Bevor Sie das unendliche Scrollen implementieren, müssen Sie zunächst das jQuery-Framework vorstellen. Sie können ein CDN verwenden, um den Zugriff zu beschleunigen, oder jQuery lokal herunterladen, um einen stabileren Zugriff zu erhalten.

2. Erstellen Sie eine einfache HTML-Vorlage

In HTML müssen Sie die Vorlage der Liste gemäß der folgenden Struktur definieren:

<div id="infinite-scroll">
    <ul id="list">
        <li>第一条数据</li>
        <li>第二条数据</li>
        <li>第三条数据</li>
        ...
    </ul>
    <div id="loading">Loading...</div>
</div>

Unter diesen ist #infinite-scroll ein großer Container Wird verwendet, um die gesamte Liste einzuschließen. #list ist ein Container, der zum Anzeigen von Daten verwendet wird. #loading ist ein Container, der zum Anzeigen von Ladeaufforderungen verwendet wird. #infinite-scroll是一个大容器，用于包裹整个列表。#list是用于显示数据的容器。#loading是用于显示加载提示的容器。

3. 编写Ajax请求代码

在实现无限滚动之前，需要编写Ajax请求代码。可以使用jQuery的$.ajax()方法来实现：

$.ajax({
    url: "/path/to/server", // 请求的服务器地址
    type: "POST", // 请求方式
    data: {'last_id' : last_id}, // 最后一个数据的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; // 更新最后一条数据的id
        } else {
            // 数据获取失败
            alert(data.message);
        }
    },
    complete: function () {
        $("#loading").hide(); // 隐藏加载提示
    },
    error: function () {
        alert("数据获取失败，请稍后重试");
    }
});

在请求成功后，将返回JSON格式的数据。可以通过$(data.data)来获取返回的数据，然后将其追加到数据容器中。

4. 实现无限滚动效果

当用户滚动到列表底部时，就会触发请求数据的Ajax请求。可以通过$(window).scroll()

Ajax-Anfragecode schreiben
Bevor Sie das unendliche Scrollen implementieren, müssen Sie einen Ajax-Anfragecode schreiben. Sie können die Methode $.ajax() von jQuery verwenden, um dies zu erreichen:

$(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("数据获取失败，请稍后重试");
        }
    });
}

Nach dem Login kopieren

Nach erfolgreicher Anfrage werden Daten im JSON-Format zurückgegeben. Sie können die zurückgegebenen Daten über $(data.data) abrufen und sie dann an den Datencontainer anhängen.

Erzielen Sie einen unendlichen Scrolleffekt

6. Wenn der Benutzer zum Ende der Liste scrollt, wird eine Ajax-Datenanforderung ausgelöst. Der unendliche Scrolleffekt kann durch die Methode $(window).scroll() erreicht werden:

<?php

namespace appcontroller;

use appBaseController;
use appmodelArticle;

class Index extends BaseController
{
    public function index()
    {
        $last_id = intval(input('post.last_id', 0));
        $articles = Article::where('id', '>', $last_id)->limit(10)->order('id', 'asc')->select();
        $data = [];
        foreach ($articles as $article) {
            $data[] = [
                'id' => $article->id,
                'title' => $article->title
            ];
        }
        return json(['status' => 200, 'data' => $data, 'last_id' => $articles->isEmpty() ? $last_id : $articles->last()->getId()]);
    }
}

Nach dem Login kopieren

Verwenden Sie ThinkPHP6, um den unendlichen Scrolleffekt zu erzielen

🎜🎜Bei Verwendung des ThinkPHP6-Frameworks müssen Sie dies tun Definieren Sie einen Controller, um Daten abzurufen. Sie können auf den folgenden Code verweisen: 🎜rrreee🎜Beim Definieren eines Controllers müssen Sie zuerst das entsprechende Modell einführen und dann das Modell verwenden, um die Daten in der Datenbank abzurufen. Nach dem Abrufen der Daten müssen die Daten in das JSON-Format formatiert und dann an das Frontend zurückgegeben werden. 🎜🎜🎜Zusammenfassung🎜🎜🎜Durch die Verwendung des ThinkPHP6-Frameworks und jQuery können wir problemlos einen unendlichen Scrolleffekt erzielen. Wenn Ihre Website eine große Datenmenge anzeigen muss, ist unendliches Scrollen eine gute Wahl. Es kann die Klickvorgänge der Benutzer reduzieren, die Benutzererfahrung verbessern, die Verweildauer der Benutzer erhöhen und das Wachstum des Website-Verkehrs fördern. 🎜

Das obige ist der detaillierte Inhalt vonSo erreichen Sie unendliches Scrollen mit ThinkPHP6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!