uniapp分段获取数据

### 实现分页加载数据 在 UniApp 中实现分页加载数据可以通过多种方式完成，通常涉及前端页面设计以及与服务器端的数据交互逻辑。对于大量数据（如500条记录），合理地分批展示不仅能够提升用户体验，还能有效减少一次性请求带来的性能压力。 #### 使用 `onReachBottom` 方法监听滚动到底部事件触发更多数据加载 当用户浏览到页面底部时自动发起新的 API 请求以获取下一批次的数据项并追加至现有列表中[^1]： ```javascript export default { data() { return { dataList: [], // 存储已加载的数据集合 page: 1, // 当前页码，默认第一页 pageSize: 20, // 每页显示数量 hasMoreData: true // 是否还有更多数据可加载标志位 } }, methods: { async fetchData() { if (!this.hasMoreData) return; try { const res = await uni.request({ url: '/api/getData', // 替换成实际接口地址 method: 'GET', data: {page: this.page, size: this.pageSize} }); let newData = res.data.items || []; this.dataList.push(...newData); // 判断是否有剩余未加载的数据 this.hasMoreData = newData.length >= this.pageSize; // 更新当前页数 this.page++; } catch (error) { console.error('Failed to fetch more data:', error); } } }, onReachBottom() { this.fetchData(); } }; ``` #### 结合 `uni-load-more` 组件提供更好的视觉反馈 为了给用户提供清晰的操作指引，在每次尝试加载新内容之前可以在界面适当位置加入正在加载提示符或按钮，并通过设置不同的状态参数控制其表现形式[^3]: ```html <template> <view class="container"> <!-- 展示已有数据 --> <block v-for="(item, index) in dataList" :key="index">{{ item }}</block> <!-- 加载更多指示器 --> <uni-load-more :status="loadingStatus"></uni-load-more> </view> </template> <script> import uniLoadMore from '@/components/uni-load-more.vue'; export default { components: {uniLoadMore}, computed: { loadingStatus() { if(this.hasMoreData){ return 'more'; }else{ return 'noMore'; } } }, ... }; </script> ```