uniapp中处理数据分页。防止页面加载时,加载大量dom,导致页面白屏。

101 阅读1分钟
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中设置触底的距离 image.png

// 分页参数处理
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]
}

关于为啥前端处理分页,因为特殊原因,是离线操作。 最后,如代码有不够完善的地方,欢迎各位大佬指正。勿喷!!!