uniapp vue3上拉加载

### 实现上拉加载更多功能 在 UniApp 和 Vue3 中实现上拉加载更多的核心在于监听用户的滚动行为并触发数据请求。具体来说，当用户滚动到底部时，应用程序应自动发起新的 API 请求以获取额外的数据，并将其追加到现有列表中。 #### 页面配置 为了启用页面的下拉刷新和上拉加载功能，需修改 `pages.json` 文件中的对应页面配置，确保设置了 `"enablePullDownRefresh": true` 属性[^2]： ```json { "pages": [ { "path": "pages/list/testPulldownRefreshReachBottom", "style": { "navigationBarTitleText": "产品列表", "enablePullDownRefresh": true, "app-plus": { "bounce": "vertical" } } } ] } ``` #### 组件代码结构 下面是一个基于组合式API风格编写的简单分页组件实例，该组件实现了上拉加载的功能[^1]: ```javascript <template> <view class="container"> <!-- 数据展示区域 --> <block v-for="(item, index) in listData" :key="index"> <text>{{ item }}</text> </block> <!-- 加载提示符 --> <loading-tip v-if="isLoading"></loading-tip> <!-- 结束提示符 --> <end-tip v-if="isEnd && !isLoading"></end-tip> </view> </template> <script setup> import { ref, onMounted } from 'vue'; import { onLoad, onReachBottom } from '@dcloudio/uni-app'; // 定义变量存储状态 const page = ref(1); const pageSize = ref(10); let totalPage = ref(null); const isLoading = ref(false); // 是否正在加载新数据 const isEnd = ref(false); // 是否已到达最后一页 const listData = ref([]); // 存储显示的数据数组 async function fetchData() { try { if (page.value > totalPage.value || isLoading.value === true) return; isLoading.value = true; const res = await uni.request({ url: `/api/data?page=${page.value}&size=${pageSize.value}`, method: 'GET' }); let data = res.data.items; // 假设返回的结果中有 items 字段保存实际数据 // 更新总页数 totalPage.value = Math.ceil(res.data.total / pageSize.value); // 将新获得的数据拼接到已有数据之后 listData.value.push(...data); // 如果当前页等于或超过总页数，则标记为结束 if (page.value >= totalPage.value) { isEnd.value = true; } // 下次调用此方法前先增加页码计数器 page.value += 1; } catch (error) { console.error('Failed to fetch more data:', error); } finally { isLoading.value = false; } } onLoad(() => { // 初始化时即刻加载第一页的内容 fetchData(); }); onReachBottom(async () => { // 当触底事件发生时尝试加载更多信息 await fetchData(); }); </script> <style scoped lang="scss"> .container { padding-bottom: 50px; } </style> ``` 上述代码展示了如何利用 Vue3 的 Composition API 来构建一个具有上拉加载特性的组件。每当用户滚动至页面底部时，便会触发 `onReachBottom()` 函数从而调用 `fetchData()` 方法去获取下一组数据。