ThinkPHP6을 사용하여 무한 스크롤을 구현하는 방법-ThinkPHP-php.cn

ThinkPHP6을 사용하여 무한 스크롤을 구현하는 방법

王林

풀어 주다： 2023-06-21 08:46:43

원래의

1176명이 탐색했습니다.

인터넷의 지속적인 발전과 함께 무한 스크롤은 현대 웹 디자인의 중요한 요소가 되었습니다. 무한 스크롤 효과는 사용자 경험을 향상시키고, 사용자가 더 쉽게 정보를 얻을 수 있도록 하며, 사용자 충성도를 높이는 데 도움이 될 수 있습니다. 이 기사에서는 ThinkPHP6 프레임워크를 사용하여 무한 스크롤 효과를 얻는 방법을 소개합니다.

jQuery 프레임워크 소개

무한 스크롤을 구현하기 전에 먼저 jQuery 프레임워크를 소개해야 합니다. CDN을 사용하여 액세스 속도를 높이거나 jQuery를 로컬로 다운로드하여 보다 안정적인 액세스를 얻을 수 있습니다.

기본 HTML 템플릿 만들기

HTML에서는 다음 구조에 따라 목록의 템플릿을 정의해야 합니다.

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

로그인 후 복사

그 중 #infinite-scroll은 큰 컨테이너입니다. 전체 목록을 래핑하는 데 사용됩니다. #list는 데이터를 표시하는 데 사용되는 컨테이너입니다. #loading은 로딩 프롬프트를 표시하는 데 사용되는 컨테이너입니다. #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("数据获取失败，请稍后重试");
    }
});

로그인 후 복사

在请求成功后，将返回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("数据获取失败，请稍后重试");
        }
    });
}

로그인 후 복사

요청이 성공하면 JSON 형식의 데이터가 반환됩니다. $(data.data)를 통해 반환된 데이터를 가져온 다음 데이터 컨테이너에 추가할 수 있습니다.

무한 스크롤 효과 달성

사용자가 목록 맨 아래로 스크롤하면 데이터에 대한 Ajax 요청이 트리거됩니다. 무한 스크롤 효과는 $(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()]);
    }
}

로그인 후 복사

무한 스크롤 효과를 얻으려면 ThinkPHP6을 사용하세요

위 내용은 ThinkPHP6을 사용하여 무한 스크롤을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!