uniapp+vue3实现分页、下拉刷新

首先先定义卡片组件

你们自己定义把，哈哈

<template>
  <view>
    <torderCard v-for="item in pager.records" :data="item" @click="goOrderDetail"></torderCard>
  </view>
</template>

我们需要定义一个page工具类

./PageUtil.ts

import {ref} from "vue";
export interface IPager<T = any> {
    current: number,
    size: number,
    total?: number,
    records: T[],
}
//这儿是定义page变量，里面有页面和数量
export function definePagerRef<T = any>(current?: number, size?: number) {
    return ref(definerPage<T>(current, size))
}
export function definerPage<T = any>(current: number = 1, size: number = 10): IPager {
    return {
        current: current,
        size: size,
        records: []
    }
}
//这儿是将下拉刷新后的数据添加到原来的数组后面
export function pageAppend<T = any>(pageData: IPager<T>, apiData: IPager, func: (l: T, r: T) => boolean) {
    const returnArr: T[] = [];
    returnArr.push(...pageData.records);
    for (const item of apiData.records) {
        if (pageData.records.filter(o => func(item, o)).length === 0) {
            returnArr.push(item)
        }
    }
    for (let key in apiData) {
        if ("records" === key) {
            pageData[key] = returnArr;
        } else {
            setKV(pageData,key,apiData)
        }
    }
    return pageData;
}
function setKV(obj:any,key:string,oldObj:any){
    obj[key] = oldObj[key]
}

工具类定义好了，开始在页面使用

import {onLoad, onPullDownRefresh, onReachBottom} from "@dcloudio/uni-app";
import {commodityApi} from "@/api/model/commodityApi";
import TorderCard from "@/pages/order/compoments/TorderItemCard.vue";
import {onMounted, ref} from "vue";
import {definePagerRef, definerPage} from "@/util/PageUtil";
import {pageAppend} from "@/util/PageUtil";

// 去订单详情
function goOrderDetail(){
  uni.navigateTo({
    url:"/pages/order/order_detail"
  })
}
// 1.定义一个pager
const pager = definePagerRef(1,5)
// 2.定义一个下一页
async function nextPage(){
  let page = await apiList(++ pager.value.current  )
  pager.value =pageAppend(pager.value,page,(l,r)=>{
    //如果id相等 说明查询到一样的，就不添加
    return l.torderId == r.torderId
  })

}
// 3.刷新得到的数据
async function refresh(){
  let page =await apiList(1)
  pager.value = page;
}
// 4.获取数据api------这儿使用你自己的api
async function apiList(page=1,size=pager.value.size){
  let {data} = await commodityApi.commodity.myTorderPage({
    size,
    current:page
  })
  return data
}
//触底刷新
onReachBottom(()=>{
  nextPage()
})
//页面加载刷新
onMounted(async () => {
  await refresh()
})
//下拉刷新
onPullDownRefresh(()=>{
  refresh()
})