vue+vant组件实现上拉加载（分页）

<van-list
	v-model:loading="loading"
	:offset="30"
	:finished="finished"
	finished-text="没有更多了"
	@load="onLoad"
>
	<div v-for="(item, index) in data.list" class="record-list" :key="index">
		<p>{{item.title}}</p>	
	</div>
</van-list>

<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import { getPlayBackList} from '@/api/modules/directSeeding'

const data = reactive({
	list: [] as any,
})
const loading:any = ref(true)
const finished:any = ref(false)
const page:any = ref(1)
const pageSize:any = ref(6)


//调接口获取数据
const getlist = () => {
    //接口
	getPlayBackList(
		pageNumber: page.value,
		pageSize: pageSize.value
	}).then((res: any) => {
		data.list.push(...res.data.data)
		loading.value = false
		loadingTwo.value = false
		finished.value = res.data.data.length < pageSize.value
	})
}

//防抖
const delay = (() => {
	let timer: any = 0
	return (callback: any, ms: any) => {
		clearTimeout(timer)
		timer = setTimeout(callback, ms)
	}
})()

// 上拉加载
const onLoad = () => {
	delay(() => {
		page.value += 1
		getlist()
	}, 1000)
}
onMounted(() => {
	getlist()
})
</script>