如何在uniapp中实现分页
时间: 2023-11-25 11:07:13 浏览: 110
在 uni-app 中,可以通过以下步骤实现分页:
1. 在页面中定义一个变量,用于保存当前页数和每页显示的数据条数:
```javascript
export default {
data() {
return {
currentPage: 1, // 当前页数
pageSize: 10, // 每页显示的数据条数
}
}
}
```
2. 在页面中定义一个方法,用于获取当前页的数据:
```javascript
export default {
data() {
return {
currentPage: 1, // 当前页数
pageSize: 10, // 每页显示的数据条数
dataList: [], // 当前页的数据列表
}
},
methods: {
getDataList() {
// 根据当前页数和每页显示的数据条数,从服务器获取数据
// 根据获取到的数据更新 this.dataList
}
},
created() {
this.getDataList() // 页面创建时获取第一页的数据
}
}
```
3. 在页面中添加分页器组件,用于切换页数:
```html
<template>
<div>
<!-- 展示当前页的数据 -->
<ul>
<li v-for="data in dataList" :key="data.id">{{ data.text }}</li>
</ul>
<!-- 分页器组件 -->
<pagination :current="currentPage" :total="total" :page-size="pageSize" @change="handlePageChange" />
</div>
</template>
```
4. 实现分页器组件的 `handlePageChange` 方法,用于在切换页数时更新当前页的数据:
```javascript
export default {
props: {
current: { type: Number, default: 1 }, // 当前页数
total: { type: Number, default: 0 }, // 数据总条数
pageSize: { type: Number, default: 10 },// 每页显示的数据条数
},
methods: {
handlePageChange(newPage) {
this.$emit('change', newPage) // 触发父组件的 change 事件
}
}
}
```
5. 在父组件中实现 `handlePageChange` 方法,用于在切换页数时更新当前页的数据:
```javascript
export default {
data() {
return {
currentPage: 1, // 当前页数
pageSize: 10, // 每页显示的数据条数
dataList: [], // 当前页的数据列表
total: 0, // 数据总条数
}
},
methods: {
getDataList() {
// 根据当前页数和每页显示的数据条数,从服务器获取数据
// 根据获取到的数据更新 this.dataList 和 this.total
},
handlePageChange(newPage) {
this.currentPage = newPage // 更新当前页数
this.getDataList() // 获取新的数据
}
},
created() {
this.getDataList() // 页面创建时获取第一页的数据
}
}
```
这样就可以在 uni-app 中实现简单的分页功能了。在实际开发中,还需要考虑一些细节问题,比如数据加载时的 loading 效果、分页器样式的美化等。
阅读全文
相关推荐
















