第一步想到的是在pages.json配置开启下拉刷新
加上"enablePullDownRefresh": true这个一句即可
"pages": [
{
"path": "apply/apply",
"style": {
"navigationBarTitleText": "页面名称",
"enablePullDownRefresh": true
}
},]
页面引入onReachBottom(上拉), onPullDownRefresh(下拉)
import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
通过接口获取数据总条数后,使用onReachBottom(上拉)完成分页
const queryList = () => {
queryParams.value.handleStatus = dropdownValue.value
inboundAndOutboundAuditing(queryParams.value).then((res) => {
if (res.code == 200) {
sparePartsCategories.value = res.rows
//接收数据总条数
total.value = res.total
}
})
}
//上拉到底时分页
onReachBottom(() => {
console.log('上拉到底时触发')
//定义参数接收当前有多少条数据
let page = queryParams.value.pageNum * queryParams.value.pageSize
//拿数据总条数和当前数据条数比对,是否要分页
if (total.value > page) {
//页数累加
queryParams.value.pageNum++
inboundAndOutboundAuditing(queryParams.value).then((res) => {
if (res.code == 200) {
//获取当前数据和分页后的数据
sparePartsCategories.value = [...sparePartsCategories.value, ...res.rows]
total.value = res.total
}
})
}
})
//下拉刷新
onPullDownRefresh(() => {
//下拉刷新,从第一页开始加载
queryParams.value.pageNum = 1
queryList()
})