功能

将分页的数据处理封装到公共文件中，单个页面中有关分页处理的逻辑代码更加简洁易懂

实现

useList.js文件

const useList = (options = {}) => {
  const { service } = options;
  const data = reactive({
    list: [],
    loading: false,
    finished: false,
    pageSize: 10,
    pageIndex: 1,
  });

  const getList = async (requestParams = {}) => {
    const params = {
      pageSize: data.pageSize,
      pageNo: data.pageIndex,
      ...requestParams,
    };
    data.loading = true;
    data.finished = false;
    const res = await service(params);
    data.loading = false;
    if (data.pageIndex === 1) {
      data.list = res.data.list || [];
    } else {
      data.list = data.list.concat(res.data.list);
    }
    if (Number(res.data.pageNo) < Number(res.data.pageTotal)) {
      data.pageIndex += 1;
    } else {
      data.finished = true;
    }
  };

  return {
    data,
    getList,
  };
};

export default useList;

列表分页的单个页面中：

<template>
<div class="page-wrapper">
  <Empty v-if="data.finished && !data.list.length" content="暂无收藏" /> 
  <div v-else class="collect-wrapper">
    <van-list
      v-model:loading="data.loading"
      :finished="data.finished"
      finished-text="没有更多了"
      :immediate-check="false"
      @load="loadMoreData"
    >
      <div class="collect-list fw">
        <CollectItem 
          v-for="item in data.list" 
          :key="item.id" 
          is-collect 
          :data="item"
        />
      </div>
    </van-list>
  </div>
</div>
</template>
<script setup>
import useList from './useList'; 
import { collectionList } from '@/services/mine.service';

// data包括分页的多个数据，例如列表数据以及分页状态等
const { data, getList } = useList({ 
  // service的内容为具体的数据请求接口
  service: collectionList, 
});

// 加载更多
const loadMoreData = () => {
  getList();
};
</script>