uniapp页面开启下拉刷新上拉加载

### 实现 UniApp 页面下拉刷新和上拉加载 在 UniApp 中实现页面的下拉刷新和上拉加载功能涉及多个方面，包括配置 `pages.json` 文件以及编写相应的 JavaScript 方法。 #### 配置 pages.json 文件 为了使页面支持下拉刷新和上拉加载，在项目的 `pages.json` 文件中需要设置特定属性。对于希望启用这些特性的页面路径，需指定： - `"enablePullDownRefresh"` 属性设为 `true` 来允许该页进行下拉刷新操作。 - 使用 `"onReachBottomDistance"` 定义距离底部多远时触发上拉加载事件；通常将其值设定得较小以便更早响应用户的滚动行为[^4]。 ```json { "easycom": { "^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue" }, "pages": [ { "path": "/page/applet/user", "style": { "navigationBarTitleText": "测试标题", "enablePullDownRefresh": true, "onReachBottomDistance": 50, // 距离页面底部多少像素时触发 onReachBottom 事件 "backgroundColor": "#F8F8F8" } } ] } ``` #### 编写页面逻辑代码 接下来是在具体的 Vue 组件内定义处理这两种交互方式的方法。通过监听框架提供的生命周期钩子函数来完成实际的数据获取工作。 ##### 下拉刷新 当用户执行下拉动作并释放手指后会自动调用此方法。在此处可发起网络请求更新数据列表，并记得结束刷新状态以恢复正常显示[^3]。 ```javascript export default { methods: { onPullDownRefresh() { console.log('正在执行下拉刷新...'); setTimeout(() => { console.log('模拟异步操作完成后停止刷新'); uni.stopPullDownRefresh(); // 停止当前页面下拉刷新 // 这里可以放置重新加载最新数据的业务逻辑... }, 2000); // 模拟延迟时间 } } }; ``` ##### 上拉加载更多 随着用户不断向下滚动浏览内容直到接近屏幕末端，则会激活这个回调函数。同样可以通过它来进行分页查询追加新条目到现有集合之中[^1]。 ```javascript export default { data() { return { loadingMore: false, // 是否处于加载更多的过程中 hasMoreData: true // 是否还有更多数据可供加载 }; }, methods: { async onLoadMore() { if (!this.hasMoreData || this.loadingMore) return; try { this.loadingMore = true; const response = await someApiCallForNextPage(); if (response.data.length === 0) { this.hasMoreData = false; } // 更新UI组件中的数据显示... } catch(error){ console.error("Failed to load more items:", error); } finally { this.loadingMore = false; } }, onReachBottom() { console.log('已到达页面最下方'); this.onLoadMore(); } } }; ```