<script setup>
let orderList = ref([])
const scrollBox = ref(null);
const atBottom = ref(false);
const isLoading = ref(true);
const page = ref(1);
onMounted (() => {
getOrderList()
if(orderList.value.length>0){
scrollBox.value.addEventListener('scroll', handleScroll);
}
})
onUnmounted(() => {
// scrollBox.value.removeEventListener('scroll', handleScroll);
});
const handleScroll = () => {
// 检查是否滚动到盒子底部
let isBottom = scrollBox.value.scrollHeight - scrollBox.value.scrollTop === scrollBox.value.clientHeight
if (isBottom && isLoading.value) { //滑动到页面最底部且数据还未加载完成的时候继续加载
page.value++
atBottom.value = true;
getOrderList()
} else {
atBottom.value = false;
}
};
const getOrderList = () => {
Api.call('order/Order', 'GetTaskList',{
"merchant_id": 28281,
"page": page.value,
"page_size": 10,
"task_status": 10,
"sort": 1,
}).then(({data}) => {
let _data = data.data
if(_data){
orderList.value = [...orderList.value,..._data]
if(_data.length < 10){
isLoading.value = false
}
}
})
}
<script>
分页【滑动到底部加载更多数据】
最新推荐文章于 2024-07-08 18:51:22 发布