vue3 hooks 上拉加载 下拉刷新 vant-list 拆分

问题描述

项目中使用了大量的 vant ui 中的 上拉加载 下拉刷新，每次都要重新定义变量不利于项目开发故此拆分 hooks 便于后续开发，该hooks 中包含了上拉加载方法 下拉刷新方法 及数据请求相关变量

hooks方法 useListRefresh.ts

import { ref, Ref } from 'vue'
// import { PromiseFunc, IPage } from '~/@types/configure' // ts 类型 
type PromiseFunc = (params?: any) => Promise<any>
interface IPage {
  pageNo: number
  pageSize: number
}

const useListRefresh = <T>(): {
  pagination: Ref<IPage>
  listData: Ref<T[]>
  loading: Ref<boolean>
  finished: Ref<boolean>
  refreshing: Ref<boolean>
  getListData: (func: PromiseFunc) => Promise<any>
  refreshCallback: (func: PromiseFunc) => void
  loadMore: (func: PromiseFunc) => void
} => {
  const pagination = ref<IPage>({
    pageNo: 1,
    pageSize: 10,
  })
  const listData = ref([])
  const loading = ref(false)
  const finished = ref(false)
  const refreshing = ref(false)
  const getListData = async (func: PromiseFunc) => {
    const res = await func()
    if (refreshing.value) {
      refreshing.value = false
      listData.value = []
    }
    const list = res.list || []
    if (pagination.value.pageNo > 1) {
      listData.value = listData.value.concat(list)
    } else {
      listData.value = list
    }
    loading.value = false
    if (listData.value.length >= res.total) {
      finished.value = true
    } else {
      finished.value = false
    }
  }
  const refreshCallback = (func: PromiseFunc) => {
    finished.value = false
    loading.value = true
    pagination.value.pageNo = 1
    setTimeout(() => {
      getListData(func)
    }, 200)
  }
  const loadMore = async (func: PromiseFunc) => {
    pagination.value.pageNo += 1
    getListData(func)
  }
  return {
    pagination,
    listData,
    loading,
    finished,
    refreshing,
    getListData,
    refreshCallback,
    loadMore,
  }
}
export default useListRefresh

项目中使用

<template>
  <div>
	<PullRefresh
        v-model="refreshing"
        class="van-pull-refresh-min-h"
        loosing-text="释放刷新"
        pulling-text="下拉刷新"
        success-text="刷新成功"
        @refresh="onRefresh"
      >

        <List
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          :immediate-check="false"
          :offset="60"
          @load="onLoad"
        >
          todo 
        </List>
      </PullRefresh>
  </div>
</template>

<script setup lang="ts">
const {
    pagination, listData, loading, finished, refreshing, getListData, refreshCallback, loadMore,
  } = useListRefresh<IapplyData>() // IapplyData ts 类型

// getList 更改为你的 axios 请求 
const promiseCallback = () => getList({ ...pagination.value })
onMounted(async () => {
  await getListData(promiseCallback)
})
// 下拉刷新
const onRefresh = () => refreshCallback(promiseCallback)
// 上拉加载
const onLoad = () => loadMore(promiseCallback)

</script>

以上就是 关于vant list vue3 相关hooks代码以及使用了，欢迎大家指点