How to implement gradual loading and paging display of data with PHP and UniApp

PHP and UniApp are two commonly used development tools. PHP is a server-side scripting language used to process server-side business logic; while UniApp is a cross-platform development framework based on Vue.js, which can be used For developing applications that support multiple platforms simultaneously. In the actual development process, we often encounter situations where we need to load a large amount of data and display it in pages. This article will introduce how to use PHP and UniApp to realize the gradual loading and paging display of data, and provide corresponding code examples.

1. Implementation on the PHP side

On the PHP side, we need to first obtain the data to be displayed from the database. In order to achieve the paging effect, we need to know the total number of data and calculate how many pages it can be divided into. Suppose we have a table named articles that stores all article information. We can use the following code to obtain the total number of data and total pages:

// 连接数据库
$servername = "localhost";
$username = "your-username";
$password = "your-password";
$dbname = "your-database";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// 获取总数据数
$sql = "SELECT COUNT(*) as total FROM articles";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
$total = $row['total'];

// 计算总页数
$pageSize = 10; // 每页显示的数据数
$totalPage = ceil($total / $pageSize);

// 关闭数据库连接
$conn->close();

Next, we need to The number of pages and the number of data displayed on each page are obtained from the database. Assuming that we need to obtain the data on page $currentPage, we can use the following code:

// 连接数据库（同上）

// 获取当前页数
$currentPage = $_GET['currentPage'];

// 计算数据的起始索引
$startIndex = ($currentPage - 1) * $pageSize;

// 获取当前页的数据
$sql = "SELECT * FROM articles LIMIT $startIndex, $pageSize";
$result = $conn->query($sql);

$data = array();
while ($row = $result->fetch_assoc()) {
    $data[] = $row;
}

// 关闭数据库连接（同上）

// 返回数据
echo json_encode($data);

2. UniApp implementation

On the UniApp side, we need to use network requests to Get the data returned by the PHP side and render the data to the page through data binding. First, we can define an articles array in data of the page to store the obtained data:

data: {
    articles: []
}

Then, in the page’s onLoadIn the life cycle function, we can send network requests to obtain data, and assign the obtained data to the articles array:

onLoad() {
    uni.request({
        url: 'http://your-domain.com/getdata.php?currentPage=1',
        success: (res) => {
            this.articles = res.data;
        }
    });
}

Next, we need to implement pull-up to load more Function. When the page scrolls to the bottom, you can trigger the loading of more operations by listening to the scrolltolower event. In the corresponding event processing function, we need to send a network request to obtain the data of the next page, and append the obtained data to the articles array:

onReachBottom() {
    let currentPage = this.articles.length / this.pageSize + 1;

    uni.request({
        url: 'http://your-domain.com/getdata.php?currentPage=' + currentPage,
        success: (res) => {
            this.articles = this.articles.concat(res.data);
        }
    });
}

So far, we have achieved The method of gradual loading and paging display of data is provided. Through the above code example, we can obtain data from the database on the PHP side and return the corresponding data based on the current page number and the number of data displayed on each page; while on the UniApp side, we can obtain the data returned by the PHP side through a network request. data and render the data onto the page. At the same time, we also implemented the pull-up loading function and realized the paging display effect. With this approach, we can efficiently handle large amounts of data and provide a better user experience when displayed in paginations.

The above is the detailed content of How to implement gradual loading and paging display of data with PHP and UniApp. For more information, please follow other related articles on the PHP Chinese website!