uniapp 下拉刷新、触底加载

### 实现下拉刷新和触底加载 在 UniApp 开发环境中，为了实现在 H5 网页网站、支付宝/微信小程序以及 Android 和 iOS 应用中的下拉刷新与触底自动加载更多数据功能，可以采用如下方式[^1]。 对于页面配置而言，需确保 `pages.json` 文件中对应页面的设置允许下拉刷新操作。具体来说，应将目标页面的 `enablePullDownRefresh` 属性设为 `true` 以便激活此特性[^2]： ```json { "pages": [ { "path": "pages/list/testPulldownRefreshReachBottom", "style": { "navigationBarTitleText": "产品列表", "enablePullDownRefresh": true, "app-plus": { "bounce": "vertical" } } } ] } ``` 针对 JavaScript 部分，则可以通过监听特定事件来处理逻辑。例如，在 Vue 组件内定义好用于存储数据项数组变量之后，可通过 `onLoadMore()` 方法响应用户的上滑动作并触发新的 API 请求获取额外的数据条目；而 `onPullDownRefresh()` 则用来捕获用户执行的手势从而重新抓取最新资料更新当前视图: ```javascript export default { data() { return { pageIndex: 1, // 当前页码 hasMoreData: true, // 是否还有更多数据 listItems: [] // 数据列表 }; }, methods: { onLoadMore() { if (!this.hasMoreData) return; this.pageIndex++; setTimeout(() => { const newData = this.fetchNewPage(this.pageIndex); if (newData.length === 0) { this.hasMoreData = false; // 如果新取得的数据长度为零则表示已无更多信息可载入 } else { this.listItems.push(...newData); // 合并新增加的内容至现有列表末端 } // 停止加载动画 uni.stopPullDownRefresh(); }, 1000); }, fetchNewPage(pageNum){ // 这里模拟异步请求过程... let result = []; for(let i=0;i<10;i++){ result.push(`Item ${pageNum}-${i}`); } return result; }, onPullDownRefresh(){ console.log('pull down refresh'); this.pageIndex = 1; this.hasMoreData = true; // 清空原有数据 this.listItems.splice(0); // 获取第一页的新鲜数据 const freshData = this.fetchNewPage(this.pageIndex); this.listItems.push(...freshData); // 结束本次刷新状态 uni.stopPullDownRefresh(); } }, onReachBottom() { this.onLoadMore(); // 页面到达最底部时调用 onLoadMore 函数 }, onPullDownRefresh() { this.onPullDownRefresh(); // 用户手动拉动屏幕顶部刷新时调用 onPullDownRefresh 函数 } } ``` 上述代码片段展示了如何利用 UniApp 提供的相关生命周期钩子函数 (`onReachBottom`, `onPullDownRefresh`) 来绑定自定义的行为处理器，并通过这些处理器内部的操作实现了预期效果——即当下方空间被完全展示出来的时候会尝试去追加更多的记录进来；反之如果用户向上拖拽界面顶端的话就相当于发起了一次重置性质的动作使得整个集合恢复成最初的状态.