Bagaimana untuk melaksanakan pemuatan dan paparan halaman secara beransur-ansur data dengan PHP dan UniApp

PHP dan UniApp ialah dua alatan pembangunan yang biasa digunakan PHP ialah bahasa skrip bahagian pelayan yang digunakan untuk mengendalikan logik perniagaan sebelah pelayan manakala UniApp ialah rangka kerja pembangunan merentas platform berdasarkan Vue.js yang boleh digunakan untuk pembangunan Menyokong aplikasi; untuk berbilang platform secara serentak. Dalam proses pembangunan sebenar, kita sering menghadapi situasi di mana kita perlu memuatkan sejumlah besar data dan memaparkannya dalam halaman. Artikel ini akan memperkenalkan cara menggunakan PHP dan UniApp untuk merealisasikan pemuatan dan paparan halaman secara beransur-ansur data, dan menyediakan contoh kod yang sepadan.

1. Pelaksanaan di sebelah PHP

Di pihak PHP, kita perlu terlebih dahulu mendapatkan data untuk dipaparkan daripada pangkalan data. Untuk mencapai kesan paging, kita perlu mengetahui jumlah bilangan data dan mengira berapa banyak halaman ia boleh dibahagikan. Katakan kita mempunyai jadual bernama articles yang menyimpan semua maklumat artikel Kita boleh menggunakan kod berikut untuk mendapatkan jumlah data dan jumlah halaman: articles的表，存储了所有的文章信息，我们可以使用以下代码获取总数据数和总页数：

// 连接数据库
$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();

接着，我们需要根据当前页数和每页显示的数据数，从数据库中获取相应的数据。假设我们需要获取第$currentPage页的数据，可以使用以下代码：

// 连接数据库（同上）

// 获取当前页数
$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);

二、UniApp端的实现

在UniApp端，我们需要使用网络请求来获取PHP端返回的数据，并通过数据绑定将数据渲染到页面上。首先，我们可以在页面的data中定义一个articles数组来存储获取到的数据：

data: {
    articles: []
}

然后，在页面的onLoad生命周期函数中，我们可以发送网络请求获取数据，并将获取到的数据赋值给articles数组：

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

接下来，我们需要实现上拉加载更多的功能。当页面滚动到底部时，可以通过监听scrolltolower事件来触发加载更多的操作。在相应的事件处理函数中，我们需要发送网络请求获取下一页的数据，并将获取到的数据追加到articles

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

Seterusnya, kita perlu mengira nombor halaman semasa. dan Bilangan data yang dipaparkan pada setiap halaman, dan data yang sepadan diperoleh daripada pangkalan data. Katakan kita perlu mendapatkan data pada halaman $currentPage, kita boleh menggunakan kod berikut:

rrreee

2. Pelaksanaan sebelah UniApp 🎜🎜Di sisi UniApp, kita perlu menggunakan permintaan rangkaian untuk mendapatkan data yang dikembalikan oleh pihak PHP, Dan memberikan data ke halaman melalui pengikatan data. Mula-mula, kita boleh mentakrifkan tatasusunan artikel dalam data halaman untuk menyimpan data yang diperoleh: 🎜rrreee🎜Kemudian, dalam onLoad halaman Dalam fungsi kitaran hayat, kami boleh menghantar permintaan rangkaian untuk mendapatkan data, dan menetapkan data yang diperoleh kepada tatasusunan articles: 🎜rrreee🎜Seterusnya, kami perlu melaksanakan lebih banyak fungsi pemuatan tarik naik. Apabila halaman menatal ke bawah, anda boleh mencetuskan pemuatan lebih banyak operasi dengan mendengar acara scrolltolower. Dalam fungsi pemprosesan acara yang sepadan, kami perlu menghantar permintaan rangkaian untuk mendapatkan data halaman seterusnya dan menambahkan data yang diperoleh pada tatasusunan articles: 🎜rrreee🎜Setakat ini, kami telah melaksanakan data Kaedah pemuatan dan paparan halaman secara beransur-ansur. Melalui contoh kod di atas, kita boleh mendapatkan data daripada pangkalan data di sebelah PHP dan mengembalikan data yang sepadan berdasarkan nombor halaman semasa dan bilangan data yang dipaparkan pada setiap halaman dan di sebelah UniApp, kita boleh mendapatkan data yang dikembalikan; oleh pihak PHP melalui permintaan data rangkaian dan memaparkan data ke halaman. Pada masa yang sama, kami juga melaksanakan fungsi pemuatan tarik naik dan merealisasikan kesan paparan halaman. Dengan pendekatan ini, kami boleh mengendalikan sejumlah besar data dengan cekap dan memberikan pengalaman pengguna yang lebih baik apabila dipaparkan dalam penomboran. 🎜

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pemuatan dan paparan halaman secara beransur-ansur data dengan PHP dan UniApp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!