使用hooks语法，抽离逻辑，复用代码，效率更高，抽离分页逻辑

//用vant list组件实现的分页   需要什么数据 什么方法
//需要拿到
// 接口 查询数据的接口  和分页数据
//需要返回
// list数据列表
// onLoad方法
// loading 加载状态 
// finished 是否全部数据加载完成

import { ref,reactive } from 'vue'

export default function usePageList(api, data) {

    let apiData = reactive(data)//请求参数limit page

    let loading = ref(false) //加载状态

    let finished = ref(false) //是否全部数据加载完成

    let list = ref([]) //列表数据

    let onLoad = async () => {
    //调接口
        let res = await api(apiData)
        // console.log(res);
        //加载状态开启
        loading.value=false
        //如果返回的数据有值
        if (res.data.list) {
        //就添加到列表数据中
            list.value.push(...res.data.list)
        }
        //分页数据下面的页面加一
        apiData.page++ 
        // 如果当前页面  大于     最大页码 
        if(apiData.page>Math.ceil(res.data.count / apiData.limit)){
            // 以后就再也不会触发 onLoad  事件
            finished.value=true
        }
    }
    return {
        onLoad,//方法
        loading,//加载状态
        finished,//是否全部数据加载完成
        list,//分页的数据
    }
}

页面内使用

<template>
  <van-nav-bar title="种草推荐" left-arrow @click-left="router.back()">
    <template #right>
      <van-icon name="add-o" />
    </template>
  </van-nav-bar>
  <div class="list">
    <van-list
      finished-text="没有更多数据了！ 别划了"
      :finished="finished"
      v-model:loading="loading"
      @load="onLoad"
      :offset="10"
    >
      <div
        class="comments-item"
        v-for="(item, index) in list"
        :key="index"
      >
        遍历种草文章{{ index }}
      </div>
    </van-list>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { getComments } from "@/api/comment";
import usePageList from '@/Hooks/usePageList'
// 获取路由器实例
let router = useRouter();
//从Hooks里面解构出需要的数据  
let {onLoad,loading,finished,list}=usePageList(getComments,{ limit: 10, page: 1 })
</script>

<style scoped lang="scss">
.list {
  margin-bottom: 50px;
  .comments-item {
    height: 100px;
    background-color: bisque;
    margin-bottom: 6px;
  }
}
</style>