With the continuous development of the Internet, infinite scrolling has become an important element of modern web design. The infinite scroll effect can help improve user experience, allow users to obtain information more easily, and increase user stickiness. This article will introduce how to use the ThinkPHP6 framework to achieve infinite scrolling effect.

1. Introducing the jQuery framework

Before implementing infinite scrolling, you first need to introduce the jQuery framework. You can use a CDN to speed up access, or download jQuery locally to obtain more stable access.

2. Build a basic HTML template

In HTML, you need to define the template of the list according to the following structure:

<div id="infinite-scroll">
    <ul id="list">
        <li>第一條數(shù)據(jù)</li>
        <li>第二條數(shù)據(jù)</li>
        <li>第三條數(shù)據(jù)</li>
        ...
    </ul>
    <div id="loading">Loading...</div>
</div>

Among them, # infinite-scroll is a large container used to wrap the entire list. #list is a container used to display data. #loading is a container used to display loading prompts.

3. Write Ajax request code

Before implementing infinite scrolling, you need to write Ajax request code. You can use jQuery's $.ajax() method to achieve this:

$.ajax({
    url: "/path/to/server", // 請求的服務器地址
    type: "POST", // 請求方式
    data: {'last_id' : last_id}, // 最后一個數(shù)據(jù)的id
    dataType: "json", // 數(shù)據(jù)類型
    beforeSend: function () {
        $("#loading").show(); // 顯示加載提示
    },
    success: function (data) {
        if(data.status == 200){
            // 成功獲取數(shù)據(jù)
            var html = "";
            $(data.data).each(function (index, item) {
                html += '<li>' + item.title + '</li>';
            });
            $("#list").append(html); // 將獲取的數(shù)據(jù)追加到列表中
            last_id = data.last_id; // 更新最后一條數(shù)據(jù)的id
        } else {
            // 數(shù)據(jù)獲取失敗
            alert(data.message);
        }
    },
    complete: function () {
        $("#loading").hide(); // 隱藏加載提示
    },
    error: function () {
        alert("數(shù)據(jù)獲取失敗，請稍后重試");
    }
});

After the request is successful, data in JSON format will be returned. You can get the returned data through $(data.data), and then append it to the data container.

4. Achieve infinite scrolling effect

When the user scrolls to the bottom of the list, an Ajax request for data will be triggered. You can achieve the infinite scrolling effect through the $(window).scroll() method:

$(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){
                // 成功獲取數(shù)據(jù)
                var html = "";
                $(data.data).each(function (index, item) {
                    html += '<li>' + item.title + '</li>';
                });
                $("#list").append(html);
                last_id = data.last_id;
            } else {
                // 數(shù)據(jù)獲取失敗
                alert(data.message);
            }
        },
        complete: function () {
            $("#loading").hide(); // 隱藏加載提示
        },
        error: function () {
            alert("數(shù)據(jù)獲取失敗，請稍后重試");
        }
    });
}

5. Use ThinkPHP6 to achieve the infinite scrolling effect

In When using the ThinkPHP6 framework, you need to define a controller to obtain data. You can refer to the following code:

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

When defining the controller, first introduce the corresponding Model, and then use the Model to obtain the data in the database. After obtaining the data, the data needs to be formatted into JSON format and then returned to the front end.

6. Summary

By using the ThinkPHP6 framework and jQuery, we can easily achieve the infinite scroll effect. If your website needs to display a large amount of data, infinite scrolling is a good choice. It can reduce user click operations, improve user experience, increase user retention time, and promote website traffic growth.

The above is the detailed content of How to achieve infinite scrolling using ThinkPHP6. For more information, please follow other related articles on the PHP Chinese website!