uniapp页面下滑

### 实现 UniApp 页面下滑加载更多或刷新功能 为了实现在 UniApp 中页面下滑加载更多或刷新的功能，需配置 `pages.json` 文件并编写相应的 JavaScript 和模板代码。 #### 配置 pages.json 文件 开启页面的下拉刷新和设置上拉触底距离来触发加载更多的行为。具体配置如下： ```json { "easycom": { "^u-(.*)" : "@/uni_modules/uview-ui/components/u-$1/u-$1.vue" }, "pages": [ { "path": "/page/applet/user", "style": { "navigationBarTitleText": "测试标题", "enablePullDownRefresh": true, // 开启下拉刷新 "onReachBottomDistance": 50, // 设置底部距离为50px时触发加载事件 "backgroundColor": "#F8F8F8" // 背景颜色可选 } } ] } ``` 此配置允许页面支持下拉刷新以及当滚动到接近页面底部一定距离时自动触发加载更多操作[^2]。 #### 编写 Vue 组件逻辑 对于页面中的数据请求部分，在页面对应的 `.vue` 文件内定义好处理函数用于响应用户的交互动作。 ##### 下拉刷新方法 在页面生命周期钩子中监听 `onPullDownRefresh()` 方法，并在此处执行重新获取最新数据的操作；完成后调用 `uni.stopPullDownRefresh();` 来停止刷新动画显示给用户。 ```javascript export default { data() { return { listData: [], // 存储列表项的数据数组 page: 1, loading: false, hasMore: true }; }, methods: { async loadData(isRefresh = false) { this.loading = true; try { let res = await uni.request({ url: 'https://example.com/api/data', // 请求地址 method: 'GET', data: { page: isRefresh ? 1 : this.page++ } // 刷新则重置分页参数 }); const newData = res.data.items; if (isRefresh || !this.listData.length) { this.listData = newData; // 如果是刷新，则替换原有数据 } else { this.listData.push(...newData); // 否则追加新取得的数据 } this.hasMore = newData && newData.length > 0; } catch(error){ console.error('Failed to fetch data:', error); } finally { this.loading = false; if (isRefresh) { uni.stopPullDownRefresh(); } } } }, onPullDownRefresh() { this.loadData(true); }, onLoad(){ this.loadData(); } }; ``` 上述代码展示了如何通过异步方式从服务器端获取新的条目更新视图，同时确保用户体验流畅无阻塞感。 ##### 上拉加载更多方法 同样地，也需要关注 `onReachBottom()` 这一钩子来进行增量式的资源加载工作。每当检测到达设定好的临界点就会触发该回调函数进而发起网络请求增加现有内容的数量直到没有更多信息为止。 ```javascript methods: { ...其他已有的方法... onReachBottom() { if (!this.loading && this.hasMore) { this.loadData(false); } } }, ``` 这段脚本实现了随着用户不断向下滚动浏览而动态扩充展示区域内的项目数量的效果。