vue下拉刷新上拉加载

### 如何在 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 开发环境中轻松实现高效的下拉刷新与上拉加载机制。这种技术方案不仅提升了用户体验，还优化了资源分配效率。

在Vue.js中实现下拉刷新加载更多内容通常涉及到两个核心组件：`v-loading`（用于显示加载状态）和`infinite-scroll`（用于处理滚动事件并触发数据的分页加载）。以下是简单的步骤： 1. 首先，在你的组件模板里引入这两个依赖库，例如使用Element UI提供的`el-loading`： ```html <template> <div ref="listContainer"> <!-- ... --> <div v-if="isLoading" class="loading">正在加载...</div> <ul infinite-scroll :trigger="loadMore" :distance="200"> <!-- 你的列表项 --> </ul> </div> </template> ``` 2. 定义必要的数据状态和方法： ```javascript <script> export default { data() { return { items: [], // 存放已加载的数据 isLoading: false, // 加载状态标志 page: 1, // 当前页面 perPage: 10, // 每页加载的数量 }; }, methods: { loadMore() { if (!this.isLoading && this.page < MAX_PAGES) { // 判断是否还有未加载的页面 this.isLoading = true; // 设置加载状态 // 发起网络请求加载下一页数据 axios.get('/api/data?page=' + (this.page + 1)) .then(response => { this.items.concat(response.data); // 将新数据追加到现有列表 this.page++; // 更新当前页码 this.isLoading = false; // 数据加载完成，设置加载状态为false }) .catch(error => { console.error('Error loading more data:', error); }); } }, }, }; </script> ``` 3. 上述代码中，当用户滚动到底部时（通过`infinite-scroll`监听），会触发`loadMore`方法。这个方法会在每次调用时发送一个GET请求，参数包含当前页数，然后将返回的新数据合并到现有的`items`数组。