页面写<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
})
}