const queryParams = ref({
/**
* 当前页数
*/
pageNum: 1,
/**
* 每页数据条数
*/
pageSize: 10,
/**
* 页面总数
*/
pageCount:0,
/**
* 数据总数
*/
total:0,
})
const dataList = ref([])
const loading = ref('more')
// 监听页面触底事件
onReachBottom(()=>{
console.log("触碰到底部了");
handleScroll()
})
可以在pages.json globalStyle中设置触底的距离
// 分页参数处理
function handleScroll() {
if(dataList.value.length === queryParams.value.total){
loading.value = 'noMore'
return
}
queryParams.value.pageCount = Math.ceil(queryParams.value.total / queryParams.value.pageSize)
queryParams.value.pageNum = queryParams.value.pageNum >= queryParams.value.pageCount ? queryParams.value.pageCount :
queryParams.value.pageNum + 1; //计算下一页页码(如果已经到达最后一页则为最后一页)
getDataByPage(queryParams.value.pageNum,queryParams.value.pageSize)
}
let allDataList = []
// 获取本地单据数据
function getLocalData(){
uni.showLoading({
title:'加载中'
})
// allDataList = getAllBills()
//测试数据
for(let i=0;i<10000;i++){
allDataList.push({
id:i,
inventoryName:'资产单名称'+(i+1),
createTime:'2022-01-01'
})
}
uni.hideLoading()
queryParams.value.total = allDataList.length
getDataByPage(queryParams.value.pageNum,queryParams.value.pageSize)
uni.hideLoading()
}
/** 本地数据分页方法
* @param {number} pageNum 当前页
* @param {number} pageSize 条数
* @returns {Array} 返回数据
*/
function getDataByPage(pageNum, pageSize) {
const startIndex = (pageNum - 1) * pageSize;
const endIndex = startIndex + pageSize;
const currentDataList = allDataList.slice(startIndex, endIndex);
dataList.value = [...dataList.value,...currentDataList]
}
关于为啥前端处理分页,因为特殊原因,是离线操作。 最后,如代码有不够完善的地方,欢迎各位大佬指正。勿喷!!!