编写一个uniapp上拉加载，下拉刷新，分页加载的 vue3组件

### Vue3 UniApp 实现上拉加载、下拉刷新和分页加载 在 Vue3 中使用 UniApp 开发时，可以通过 `onPullDownRefresh` 和 `onReachBottom` 方法分别实现下拉刷新和上拉加载功能。以下是详细的代码示例以及注意事项。 #### 下拉刷新 为了启用下拉刷新功能，在页面的 JSON 配置中需要设置 `enablePullDownRefresh` 属性为 `true` 或者配置 `pullToRefresh.support` 为 `true`[^1]。 下面是一个完整的下拉刷新示例： ```javascript <template> <view class="content"> <!-- 页面内容 --> <text>下拉刷新示例</text> </view> </template> <script setup> import { ref } from 'vue'; const listData = ref([]); // 模拟获取数据的方法 function fetchData() { return new Promise((resolve) => { setTimeout(() => { resolve([ { id: Math.random(), name: 'Item' }, { id: Math.random(), name: 'Item' } ]); }, 1000); }); } export default { onPullDownRefresh() { // 执行刷新操作 refreshData(); }, methods: { async refreshData() { const newData = await fetchData(); listData.value = newData; // 刷新数据覆盖旧数据 uni.stopPullDownRefresh(); // 停止下拉刷新动画 } } }; </script> ``` #### 上拉加载更多 当用户滚动到页面底部时，触发 `onReachBottom` 方法来加载更多的数据。需要注意的是，为了避免频繁触底加载，通常会加入一些状态变量控制加载行为[^2]。 以下是一个简单的上拉加载示例： ```javascript <template> <view class="content"> <block v-for="(item, index) in listData" :key="index"> <text>{{ item.name }}</text> </block> </view> </template> <script setup> import { ref } from 'vue'; const page = ref(1); // 当前页码 const pageSize = ref(10); // 每页数量 const hasMore = ref(true); // 是否还有更多数据 const loading = ref(false); // 加载状态 const listData = ref([]); // 数据列表 // 模拟获取数据的方法 async function fetchMoreData(currentPage) { if (loading.value || !hasMore.value) return; loading.value = true; try { const response = await new Promise((resolve) => setTimeout( () => resolve({ data: Array.from({ length: pageSize.value }).map((_, i) => ({ id: currentPage * pageSize.value + i, name: `Item ${currentPage * pageSize.value + i}` })) }), 1000 ) ); if (response.data.length < pageSize.value) { hasMore.value = false; // 如果返回的数据少于一页，则表示没有更多数据 } listData.value.push(...response.data); // 追加新数据 } catch (error) { console.error('Error fetching more data:', error); } finally { loading.value = false; } } export default { onReachBottom() { page.value += 1; // 更新页码 fetchMoreData(page.value); // 获取更多数据 } }; </script> ``` #### 分页加载 分页加载的核心在于维护当前页数 (`page`) 和每页大小 (`pageSize`) 的状态，并通过 API 请求动态更新数据列表。每次请求成功后，将新的数据追加到现有列表中[^3]。 ##### 注意事项 - **性能优化**：对于大量数据场景，建议采用虚拟列表技术减少 DOM 渲染压力。 - **用户体验**：可以在加载过程中展示提示信息（如“正在加载...”），提升交互友好度。 - **错误处理**：在网络异常情况下应提供友好的反馈机制，允许用户重新尝试加载。 --- ###