<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>
vue+vant组件实现上拉加载(分页)
于 2024-04-10 11:15:25 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)