vue3+uni-app上拉分页下拉刷新

第一步想到的是在pages.json配置开启下拉刷新

加上"enablePullDownRefresh": true这个一句即可

"pages": [
        {
          "path": "apply/apply",
          "style": {
            "navigationBarTitleText": "页面名称",
            "enablePullDownRefresh": true
          }
        },]

页面引入onReachBottom(上拉), onPullDownRefresh(下拉)

import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'

通过接口获取数据总条数后，使用onReachBottom（上拉）完成分页

const queryList = () => {
  queryParams.value.handleStatus = dropdownValue.value
  inboundAndOutboundAuditing(queryParams.value).then((res) => {
    if (res.code == 200) {
      sparePartsCategories.value = res.rows
      //接收数据总条数
      total.value = res.total
    }
  })
}

//上拉到底时分页
onReachBottom(() => {
  console.log('上拉到底时触发')
  //定义参数接收当前有多少条数据
  let page = queryParams.value.pageNum * queryParams.value.pageSize
  //拿数据总条数和当前数据条数比对，是否要分页
  if (total.value > page) {
    //页数累加
    queryParams.value.pageNum++
    inboundAndOutboundAuditing(queryParams.value).then((res) => {
      if (res.code == 200) {
        //获取当前数据和分页后的数据
        sparePartsCategories.value = [...sparePartsCategories.value, ...res.rows]
        total.value = res.total
      }
    })
  }
})
//下拉刷新
onPullDownRefresh(() => {
  //下拉刷新，从第一页开始加载
  queryParams.value.pageNum = 1
  queryList()
})