更新记录

1.0.1（2025-08-01）

1. 初次上传页面组件

平台兼容性

uni-app(4.75)

uni-app x(4.75)

📦 PageList 组件文档

基于 uni-app + Vue3 + setup + UTS 封装的下拉刷新 + 上拉加载列表容器组件。 专为微信小程序端优化，内置刷新、加载、空状态和“无更多”提示，可结合分页接口快速构建分页列表。

✅ 功能亮点

• ✨ 支持下拉刷新（onPullDownRefresh）
• ✨ 支持上拉加载更多（onReachBottom）
• ✨ 内置空数据 / 加载中 / 无更多视图
• ✨ 支持自定义插槽替换默认提示
• ✨ 提供状态管理与方法：isRefreshing / isLoadingMore / finishRefresh / finishLoadMore / reset

📦 目录结构

components/PageList.vue           # 主组件
composables/usePageList.ts       # 列表状态与事件逻辑 Hook

⚙️ 组件 Props

🎉 事件

⚠️ 建议在外部页面的 onPullDownRefresh 和 onReachBottom 中调用组件暴露的方法。

🧩 内部方法（通过 ref 调用）

🔧 插槽

🛠️ 基本用法

假设外部页面需要监听 onPullDownRefresh 和 onReachBottom：

<template>
  <PageList
    ref="pageListRef"
    :listLength="items.length"
    :finished="finished"
    @refresh="loadData(true)"
    @loadMore="loadData(false)"
  >
    <!-- 列表内容 -->
    <view v-for="item in items" :key="item.id" class="item">{{ item.name }}</view>

    <!-- 自定义无数据 -->
    <template #empty>
      <view>😅 暂无内容</view>
    </template>
  </PageList>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const items = ref<any[]>([])
const finished = ref(false)
const pageListRef = ref()

async function loadData(refresh: boolean) {
  if (refresh) {
    items.value = []   // 重置数据
    finished.value = false
  }
  // 模拟加载数据
  const newItems = await fetchItems()
  if (refresh) pageListRef.value?.finishRefresh()
  else pageListRef.value?.finishLoadMore()

  items.value.push(...newItems)
  if (newItems.length < 10) finished.value = true
}

// 外部页面生命周期
onPullDownRefresh(() => {
  pageListRef.value?.onPullDownRefreshHandler()
})
onReachBottom(() => {
  pageListRef.value?.onReachBottomHandler()
})

// 模拟接口
async function fetchItems() {
  return new Promise(resolve => {
    setTimeout(() => resolve([{ id: Date.now(), name: 'Item ' + Date.now() }]), 500)
  })
}
</script>

🎨 默认样式

• .page-list：容器（内边距 & 最小高度）
• .refresh-indicator：刷新中视图
• .load-more：加载中视图
• .load-finished：无更多视图
• .empty：空状态视图
• 内置 loading 动画：.spinner

样式可根据需求覆盖或通过插槽替换内容

🧰 usePageList Hook 功能

🧪 自定义刷新 / 加载视图示例

<template #refresh-indicator>
  <view>🌊 正在努力刷新...</view>
</template>

<template #load-more>
  <view>🚀 加载中...</view>
</template>

<template #finished>
  <view>🎉 没有更多了</view>
</template>

<template #empty>
  <view>📭 空空如也</view>
</template>

✅ 总结

PageList 是一个简洁、易用、可扩展的分页列表容器：

• 内置状态管理
• 支持自定义 UI
• 解耦列表渲染与加载逻辑
• 配合 uni-app 微信小程序生命周期更方便

如果想，我还可以帮你写：

• 完整示例项目
• TS 类型声明
• 使用示例 GIF

要的话请告诉我！ 🚀