Comment obtenir un défilement infini en utilisant ThinkPHP6-PensezPHP-php.cn

Comment obtenir un défilement infini en utilisant ThinkPHP6

王林

Libérer： 2023-06-21 08:46:43

original

1129 Les gens l'ont consulté

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.

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.

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>

Copier après la connexion

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是用于显示加载提示的容器。

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

Copier après la connexion

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

实现无限滚动效果

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

$.ajax()

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

Copier après la connexion

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

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

Copier après la connexion

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

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!