uniapp小程序封装下拉加载

因业务需要，要封装一个下拉刷新，我们的页数是从header上传的。

1）记录当前页数,记录当前每页有多少条数据，记录总页数,记录当前数据,判断是否最后一页

 const pageListCurrent = ref(1)    //当前页数
 const pageListSize = ref(10) //每页条数
 const pageListTotal = ref(0) //总条数
 const pageList = reactive([]) //记录数据源
 const pageListIsFinish = ref(false) //判断是否最后一页

2）做一个是否在加载中的判断，用于加载的时候，给页面展示

  const pageLoading = ref(false)

3）做一个空判断，也是用于页面展示

const isEmpty = computed(() => {
    return pageList.length === 0
})

4）首次发起请求

首先改变当前加载状态，其次判断是否最后一页（用于后续下拉刷新),给总页数赋值，最后将请求返回的数据push到展示的列表中

 const pageRequestList = () => {
    pageLoading.value = true
    request.get(XXXXXXX).then((response) => {
      if (response.data.currentPage === response.data.lastPage) {
        pageListIsFinish.value = true
      }
      if (response.data.total === 0) {
        pageListIsFinish.value = true
      }
      pageListTotal.value = response.data.total
      pageList.push(...response.data.data)
      pageLoading.value = false
    }).catch((error) => {
      pageLoading.value = false
      toast.error(error.message)
    })
  }

5）下拉发起请求

首先判断是否最后一页，或者是不是在加载中，如果是，则return，不做任何操作。如果不是就页数加一，最后发起请求

 const pageNext = () => {
    if (pageLoadIsFinish.value && pageLoading.value) return
    pageListCurrent.value += 1
    pageRequestList()
  }