分页【滑动到底部加载更多数据】

最新推荐文章于 2024-05-22 13:52:22 发布

小可以o

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量68

点赞数 1

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_53149377/article/details/138534137

版权

<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>