uniapp vue3 怎么做下拉刷新上拉加载

### 如何在 UniApp 和 Vue3 中实现下拉刷新和上拉加载功能 #### 配置 `pages.json` 文件 为了启用下拉刷新功能，需要在项目的 `pages.json` 文件中设置对应页面的 `enablePullDownRefresh` 属性为 `true`。这一步是基础配置，只有完成此操作才能触发下拉刷新事件[^3]。 ```json { "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "enablePullDownRefresh": true, "app-plus": { "bounce": "vertical" } } } ] } ``` --- #### 页面结构设计 通常情况下，可以使用 `<scroll-view>` 组件来封装列表区域，并通过监听其滚动行为实现上拉加载的功能。以下是基本的 HTML 结构： ```html <template> <view class="container"> <!-- 列表容器 --> <scroll-view scroll-y :style="{ height: scrollHeight + 'px' }" @scrolltolower="loadMoreData" refresher-enabled @refresherrefresh="onPullDownRefresh" > <block v-for="(item, index) in dataList" :key="index"> <view class="list-item">{{ item.name }}</view> </block> <!-- 加载状态提示 --> <view v-if="loadingStatus === 'loading'" class="loading-tip">正在加载...</view> <view v-if="loadingStatus === 'no-more'" class="loading-tip">没有更多数据</view> </scroll-view> </view> </template> ``` 上述代码片段展示了如何利用 `<scroll-view>` 的属性 `@scrolltolower` 来检测是否触底并调用方法 `loadMoreData()` 进行上拉加载；同时，也设置了 `@refresherrefresh` 方法用于处理下拉刷新逻辑[^1]。 --- #### JavaScript 逻辑编写 下面是一个完整的 JS 示例，展示如何结合 Vue3 的响应式特性管理数据以及控制加载状态： ```javascript <script setup> import { ref, onMounted } from 'vue'; // 数据初始化 const dataList = ref([]); const loadingStatus = ref(''); // 可选值：'' (初始), 'loading', 'no-more' const scrollHeight = ref(0); // 动态计算的高度 // 模拟接口请求函数 function fetchData(pageNo) { return new Promise((resolve) => { setTimeout(() => { const newData = Array.from({ length: 10 }, (_, i) => ({ name: `Item ${(pageNo - 1) * 10 + i}` })); resolve(newData); }, 1000); }); } // 获取屏幕可用高度 onMounted(async () => { const systemInfo = await uni.getSystemInfoSync(); scrollHeight.value = systemInfo.windowHeight; }); // 下拉刷新回调 async function onPullDownRefresh() { try { loadingStatus.value = ''; dataList.value = []; const res = await fetchData(1); dataList.value.push(...res); uni.stopPullDownRefresh(); // 停止刷新动画 } catch (error) { console.error(error); uni.showToast({ title: '刷新失败', icon: 'none' }); uni.stopPullDownRefresh(); } } // 上拉加载更多 let currentPage = 1; // 当前页数 async function loadMoreData() { if (loadingStatus.value !== '') return; loadingStatus.value = 'loading'; currentPage += 1; try { const res = await fetchData(currentPage); if (!res.length || res.length < 10) { loadingStatus.value = 'no-more'; // 表明已无更多数据可加载 } else { loadingStatus.value = ''; // 正常加载完毕重置状态 } dataList.value.push(...res); } catch (error) { console.error(error); loadingStatus.value = ''; // 出错时恢复默认状态 uni.showToast({ title: '加载失败', icon: 'none' }); } } </script> ``` 以上脚本实现了两个核心功能： 1. **下拉刷新**：当用户执行下拉动作时会清空当前的数据列表并通过模拟 API 请求重新获取第一页的内容； 2. **上拉加载**：当用户滑动到底部时自动增加分页参数并向服务器发起新请求以追加更多的条目至现有列表之中[^2]。 --- #### CSS 样式定义 最后附带一些简单的样式以便更好地呈现效果： ```css <style scoped> .container { width: 100%; padding: 10px; box-sizing: border-box; } .list-item { margin-bottom: 10px; background-color: #f9f9f9; padding: 15px; border-radius: 8px; font-size: 16px; } .loading-tip { text-align: center; color: gray; padding: 10px 0; } </style> ``` --- ### 总结 通过合理配置 `pages.json` 并借助 `<scroll-view>` 提供的相关事件支持，可以在 UniApp 和 Vue3 开发环境中轻松实现高效的下拉刷新与上拉加载机制。这种技术方案不仅提升了用户体验，还优化了资源分配效率。