uniapp下拉加载分页

214 阅读1分钟
 页面写<div ref="loadMore" @scroll="handleScroll"></div>  

引入依赖
import { ref, computed } from 'vue';
	import { contractCollectionList } from '@/services/api';

 页码  const pageNo = ref(1);
	定义请求参数let prarms = {
		pageNo: pageNo.value,
		pageSize: 10,
		timeId: 1,//1日 2近七天 3近30天
		status: 0,//0 已付款 1未付款 2 全部
	}

  数据条数	let sketchBoxDataTotal = ref();
  触底方法	function loadMoreData() {

		if (sketchBoxDataLen.value < sketchBoxDataTotal.value) {
			pageNo.value++;
			GetList()
		}
	}
	
 计算条数	const sketchBoxDataLen = computed(() => {
		return list.value.length;
	})
触底api	onReachBottom(() => {
		loadMoreData()
	})
	
请求方法	let GetList = () => {
		contractCollectionList(prarms).then((res) => {
			if (pageNo.value == 1) {
				list.value = res.result.records
			} else {
				list.value = list.value.concat(res.result.records)
			}

			sketchBoxDataTotal.value = res.result.total
		})
	}