uniapp分页数据

### UniApp 中实现分页数据加载 在 UniApp 开发中，分页数据加载是一种常见的需求场景。以下是基于 `onReachBottom` 和 `scroll-view` 的两种方式来实现分页加载。 #### 方法一：使用 `onReachBottom()` 实现触底加载 此方法适用于页面整体滚动的情况。当用户滑动到页面底部时触发 `onReachBottom` 事件，从而加载更多数据。 ```javascript export default { data() { return { pageNumber: 1, // 当前页码 pageSize: 10, // 每页显示的数据条数 total: 0, // 总数据量 listData: [] // 存储数据的数组 }; }, methods: { getCarList() { const params = { page: this.pageNumber, size: this.pageSize }; // 假设这是请求接口获取数据的部分逻辑 uni.request({ url: 'https://example.com/api/car-list', // 替换为实际接口地址 method: 'GET', data: params, success: res => { if (res.data.code === 200) { this.listData = [...this.listData, ...res.data.result]; // 合并新旧数据 this.total = res.data.total; // 更新总数据量 } } }); } }, onReachBottom() { if (this.total < 10 || this.pageNumber * 10 >= this.total) { // 判断是否还有更多数据 return uni.showToast({ title: "数据加载完毕!", icon: 'none' }); } this.pageNumber++; // 加载下一页 this.getCarList(); } }; ``` 上述代码展示了如何利用 `onReachBottom` 来检测用户的滚动行为，并动态加载更多的数据[^1]。 --- #### 方法二：使用 `scroll-view` 组件实现上下拉刷新和上拉加载 如果需要更灵活的控制（比如局部区域内的滚动），可以使用 `scroll-view` 组件配合其内置事件完成分页功能。 ##### HTML 部分 ```html <scroll-view class="scroll-area" scroll-y="true" @scrolltolower="loadMore" :style="{ height: scrollHeight + 'px' }"> <!-- 数据展示 --> <view v-for="(item, index) in listData" :key="index">{{ item.name }}</view> <!-- 上拉加载提示 --> <view class="loading-text">正在加载...</view> </scroll-view> ``` ##### JavaScript 部分 ```javascript export default { data() { return { pageNumber: 1, pageSize: 10, total: 0, listData: [], scrollHeight: 500 // 自定义 scroll-view 的高度 }; }, onLoad() { this.getCarList(); // 页面初始化时加载第一页数据 }, methods: { getCarList() { const params = { page: this.pageNumber, size: this.pageSize }; uni.request({ url: 'https://example.com/api/car-list', // 替换为实际接口地址 method: 'GET', data: params, success: res => { if (res.data.code === 200) { this.listData = [...this.listData, ...res.data.result]; this.total = res.data.total; } } }); }, loadMore() { if (this.total < 10 || this.pageNumber * 10 >= this.total) { return uni.showToast({ title: "数据加载完毕!", icon: 'none' }); } this.pageNumber++; this.getCarList(); } } }; ``` 需要注意的是，在设置 `scroll-view` 的高度时要小心处理样式冲突问题。如果设置了固定的高度，则可能导致某些情况下无法正常触发 `@refresherrefresh` 或其他交互事件[^2]。 --- ### 注意事项 - **性能优化**：随着数据增多，渲染效率可能会下降。可以通过虚拟列表技术减少 DOM 节点数量。 - **错误处理**：在网络异常或其他意外情况发生时应提供友好的反馈机制给用户。 - **用户体验**：合理设计加载动画或文字提示提升操作流畅度。