uniapp使用scroll-view滚动到底部后加载更多

### 实现 scroll-view 组件滚动到底部时自动加载更多 为了使 `scroll-view` 组件能够检测到滚动到底部并触发加载更多数据的操作，在 `scroll-view` 中需设置特定属性来监控滚动位置。由于默认情况下页面级别的 `onReachBottom` 不会因 `scroll-view` 的存在而触发，因此需要自定义逻辑处理。 #### 设置 scroll-view 属性 通过给 `scroll-view` 添加 `@scrolltolower` 事件绑定函数，可以实现当用户滚动到达容器底部时调用指定方法执行进一步操作： ```html <template> <view class="container"> <!-- 启用纵向滚动 --> <scroll-view :scroll-y="true" @scrolltolower="loadMoreData" lower-threshold="50"> <!-- 距离底部多少像素时触发 --> <!-- 列表项渲染区域 --> <block v-for="(item, index) in dataList" :key="index"> <text>{{ item }}</text> </block> <!-- 加载提示符 --> <loading-indicator v-if="isLoading"></loading-indicator> </scroll-view> </view> </template> ``` 上述代码片段展示了如何配置 `scroll-view` 来响应接近底部的行为[^1]。 #### 数据与状态管理 在脚本部分维护列表的数据源以及加载标志位的状态变化： ```javascript <script setup> import { ref } from 'vue'; // 假定初始有十条数据 const dataList = ref(Array.from({ length: 10 }, (_, i) => `Item ${i}`)); let currentPage = 1; const isLoading = ref(false); async function loadMoreData() { if (isLoading.value || !dataList.value.length % 10 === 0) return; try { isLoading.value = true; // 模拟异步请求获取新一批次的数据 await new Promise(resolve => setTimeout(() => resolve(), 1000)); const nextPageItems = Array.from( { length: 10 }, (_, idx) => `Item ${(currentPage++) * 10 + idx}` ); dataList.value.push(...nextPageItems); } finally { isLoading.value = false; } } </script> ``` 此段 JavaScript 代码实现了分页加载机制，并确保每次只会在必要时候发起新的加载请求。 #### 注意事项 - **lower-threshold 参数**：用于设定距离底部多远的距离内触发 `scrolltolower` 事件；单位为 px。 - 当前例子假设每一页固定返回相同数量的新项目（比如这里取的是十个），实际开发中应根据 API 返回调整逻辑。 - 如果网络延迟较大或服务器端无法及时提供下一页的内容，则应在界面上给予适当反馈告知用户当前处于等待状态。 - 对于首次进入视图的情况，可能不需要立即显示加载指示器，除非确实开始了额外的数据拉取过程。