import type { Ref } from 'vue' export interface IPaginationParams { page: number size: number } interface IUpdateDataOptions { /** 错误信息 */ error: boolean | Error /** 是否还有更多数据 */ hasNext: boolean /** 列表数据 */ items: T[] } interface IUseListDataOptions { params: IPaginationParams /** 加载状态 */ loading: Ref onPullDownRefresh?: (params: IPaginationParams, updateData: (data: IUpdateDataOptions) => void) => void onReachBottom?: (params: IPaginationParams, updateData: (data: IUpdateDataOptions) => void) => void } /** * useListData是一个定制化的列表数据管理钩子,用于处理列表数据的添加和刷新。 * @param T 列表数据类型,默认为any。 * @returns 返回一个对象{list, append},包含列表数据和数据操作方法。 */ export function useListData(options: IUseListDataOptions) { const _hasNext = ref(false) const _error = ref() const _items = shallowRef([]) /** 是否追加数据 */ const isAppend = ref(false) /** 列表数据 */ const list = shallowRef([]) /** * 数据操作方法 * @param data 新数据数组 */ function append(data: T[]) { if (isAppend.value) { list.value.push(...data) return } list.value = data } function _updateData(data: IUpdateDataOptions) { _error.value = data.error _hasNext.value = data.hasNext _items.value = data.items uni.stopPullDownRefresh() } function refresh() { if (options.loading.value) { return } isAppend.value = false options.params.page = 1 options.onPullDownRefresh?.(options.params, _updateData) } /** 下拉刷新 */ onPullDownRefresh(() => { refresh() }) /** 上拉加载更多 */ onReachBottom(() => { if (options.loading.value) { return } if (!_hasNext.value) { return } options.params.page += 1 isAppend.value = true options.onReachBottom?.(options.params, _updateData) }) /** 监听items变化 */ watch(() => _items.value, (newVal) => { if (_error.value) { return } append(newVal) }) return { list, refresh, } }