Bagaimana untuk melaksanakan penatalan tak terhingga menggunakan ThinkPHP6

Dengan pembangunan Internet yang berterusan, tatal tak terhingga telah menjadi elemen penting dalam reka bentuk web moden. Kesan tatal yang tidak terhingga boleh membantu meningkatkan pengalaman pengguna, membolehkan pengguna mendapatkan maklumat dengan lebih mudah dan meningkatkan kelekatan pengguna. Artikel ini akan memperkenalkan cara menggunakan rangka kerja ThinkPHP6 untuk mencapai kesan tatal yang tidak terhingga.

1. Memperkenalkan rangka kerja jQuery

Sebelum melaksanakan penatalan tak terhingga, anda perlu memperkenalkan rangka kerja jQuery terlebih dahulu. Anda boleh menggunakan CDN untuk mempercepatkan akses, atau memuat turun jQuery secara setempat untuk mendapatkan akses yang lebih stabil.

2. Bina templat HTML asas

Dalam HTML, anda perlu mentakrifkan templat senarai mengikut struktur berikut:

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

di mana, #infinite-scroll ialah Bekas besar yang membungkus keseluruhan senarai. #list ialah bekas yang digunakan untuk memaparkan data. #loading ialah bekas yang digunakan untuk memaparkan gesaan pemuatan.

3. Tulis kod permintaan Ajax

Sebelum melaksanakan penatalan tak terhingga, anda perlu menulis kod permintaan Ajax. Ini boleh dicapai menggunakan kaedah $.ajax() jQuery:

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

Selepas permintaan berjaya, data dalam format JSON akan dikembalikan. Anda boleh menggunakan $(data.data) untuk mendapatkan data yang dikembalikan dan kemudian menambahkannya pada bekas data.

4. Mencapai kesan tatal tak terhingga

Apabila pengguna menatal ke bahagian bawah senarai, permintaan Ajax untuk data akan dicetuskan. Kesan tatal tak terhingga boleh dicapai melalui kaedah $(window).scroll():

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

5. Menggunakan ThinkPHP6 untuk mencapai kesan tatal tak terhingga

Dalam menggunakan rangka kerja ThinkPHP6, anda perlu tentukan pengawal untuk Mendapatkan data. Anda boleh merujuk kepada kod berikut:

<?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()]);
    }
}

Apabila mentakrifkan pengawal, anda mesti memperkenalkan Model yang sepadan dahulu, dan kemudian menggunakan Model untuk mendapatkan data dalam pangkalan data. Selepas mendapatkan data, data perlu diformatkan ke dalam format JSON dan kemudian dikembalikan ke bahagian hadapan.

6. Ringkasan

Dengan menggunakan rangka kerja ThinkPHP6 dan jQuery, kami boleh mencapai kesan tatal tak terhingga dengan mudah. Jika tapak web anda perlu memaparkan sejumlah besar data, tatal tanpa had ialah pilihan yang baik Ia boleh mengurangkan operasi klik pengguna, meningkatkan pengalaman pengguna, meningkatkan masa pengekalan pengguna dan menggalakkan pertumbuhan trafik tapak web.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan penatalan tak terhingga menggunakan ThinkPHP6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!