Comment obtenir un défilement infini en utilisant ThinkPHP6

Avec le développement continu d'Internet, le défilement infini est devenu un élément important de la conception Web moderne. L'effet de défilement infini peut contribuer à améliorer l'expérience utilisateur, permettre aux utilisateurs d'obtenir des informations plus facilement et augmenter la fidélité de l'utilisateur. Cet article explique comment utiliser le framework ThinkPHP6 pour obtenir un effet de défilement infini.

1. Présentation du framework jQuery

Avant d'implémenter le défilement infini, vous devez d'abord présenter le framework jQuery. Vous pouvez utiliser un CDN pour accélérer l'accès ou télécharger jQuery localement pour obtenir un accès plus stable.

2. Construire un modèle HTML de base

En HTML, vous devez définir le modèle de la liste selon la structure suivante :

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

Parmi eux, #infinite-scroll est un grand conteneur utilisé pour envelopper la liste entière. #list est un conteneur utilisé pour afficher des données. #loading est un conteneur utilisé pour afficher les invites de chargement. #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()

Écrire le code de requête Ajax
Avant d'implémenter le défilement infini, vous devez écrire le code de requête Ajax. Vous pouvez utiliser la méthode $.ajax() de jQuery pour y parvenir :

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

Une fois la requête réussie, les données au format JSON seront renvoyées. Vous pouvez obtenir les données renvoyées via $(data.data), puis les ajouter au conteneur de données.

Obtenez un effet de défilement infini

6. Lorsque l'utilisateur fait défiler vers le bas de la liste, une demande de données Ajax sera déclenchée. L'effet de défilement infini peut être obtenu grâce à la méthode $(window).scroll() :

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

Utilisez ThinkPHP6 pour obtenir l'effet de défilement infini

🎜🎜En utilisant le framework ThinkPHP6, vous devez définir un contrôleur Obtenir des données. Vous pouvez vous référer au code suivant : 🎜rrreee🎜Lors de la définition d'un contrôleur, vous devez d'abord introduire le Modèle correspondant, puis utiliser le Modèle pour obtenir les données dans la base de données. Après avoir obtenu les données, celles-ci doivent être formatées au format JSON puis renvoyées au front-end. 🎜🎜🎜Résumé🎜🎜🎜En utilisant le framework ThinkPHP6 et jQuery, nous pouvons facilement obtenir un effet de défilement infini. Si votre site Web doit afficher une grande quantité de données, le défilement infini est un bon choix. Il peut réduire les opérations de clic des utilisateurs, améliorer l'expérience utilisateur, augmenter le temps de rétention des utilisateurs et favoriser la croissance du trafic sur le site Web. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!