How to implement data paging function through PHP and UniApp
Introduction:
When developing mobile applications based on UniApp, it is often necessary to obtain a large amount of data from the server and display it in the App. In order to improve user experience and application performance, we often need to display data in pages. This article will introduce how to use PHP and UniApp to implement data paging function, with code examples.
1. PHP part:
CREATE TABLE user
(
id
int(11) NOT NULL AUTO_INCREMENT,
username
varchar(255 ) NOT NULL,
age
int(11) NOT NULL,
PRIMARY KEY (id
)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
Then insert some test data:
INSERT INTO user
(id
, username
, age
) VALUES
(1, 'Zhang San', 18),
(2, 'Li Si', 20),
(3, 'Wang Wu', 25),
(4, 'Zhao Six', 30),
(5, 'Qianqi', 35),
(6, 'Sunba', 40),
(7, 'Zhoujiu', 45),
(8, 'Wu Shi', 50);
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
// Connect to the database
$mysqli = new mysqli("localhost", "username", "password", "database");
// Check whether the connection is successful
if ( $mysqli->connect_errno) {
echo "Failed to connect to MySQL: " . $mysqli->connect_error; exit();
}
// Get the current page number
$page = isset($_GET['page']) ? $_GET['page' ] : 1;
//The number of data items displayed per page
$perPage = 3;
//Calculate the starting offset
$offset = ($page - 1) * $perPage;
//Query data
$result = $mysqli->query("SELECT * FROM user
LIMIT $offset, $perPage");
// Return data to the front end in JSON format
$data = array();
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
echo json_encode($data);
//Close the database connection
$mysqli->close();
?>
2. UniApp Part:
<view v-for="user in userList" :key="user.id"> <text>{{ user.username }}</text> <text>{{ user.age }}</text> </view> <button @click="loadMore">加载更多</button>
<script> <br>export default {<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { userList: [], // 存储用户列表数据 page: 1 // 当前页码 };</pre><div class="contentsignin">Copy after login</div></div><p>},<br> mounted() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>this.loadData();</pre><div class="contentsignin">Copy after login</div></div><p>},<br> methods: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>loadData() { uni.request({ url: 'http://your-php-server/api/getData.php', data: { page: this.page }, success: (res) => { if (res.statusCode === 200) { this.userList = this.userList.concat(res.data); } } }); }, loadMore() { this.page++; this.loadData(); }</pre><div class="contentsignin">Copy after login</div></div><p>}<br>};<br></script>
"networkTimeout": {
"request": 60000,
"downloadFile": 60000,
"uploadFile": 60000,
"websocket": 60000
},
"uni.request": {
"protocol": "https",
"domain": "your-php-server"
}
Above These are the steps and code examples for using PHP and UniApp to implement data paging function. Obtain the data of the specified page number from the database through the PHP interface and display the data in UniApp. When the user clicks the "Load More" button, the corresponding page number is sent and the data for the next page is loaded. In this way, the data paging function is realized, which improves user experience and application performance.
The above is the detailed content of How to implement data paging function through PHP and UniApp. For more information, please follow other related articles on the PHP Chinese website!