van-list 下拉刷新 触底分页 触底分页事件只加载一次

### 如何在 Vant-UI 中实现数据懒加载 Vant 是一款轻量级、可定制化的 Vue 移动端 UI 库，适用于构建移动 Web 应用程序。为了提升用户体验并优化性能，许多场景都需要支持 **数据懒加载** 功能。以下是通过 Vant 的 `List` 组件实现数据懒加载的具体方法。 #### 使用 List 组件实现数据懒加载 Vant 提供了专门用于处理列表滚动加载需求的组件——`List`[^1]。该组件能够监听用户的滑动操作，并触发自定义事件以动态加载更多数据。下面是一个完整的示例： ```vue <template> <div class="scroll-container"> <!-- 列表容器 --> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" > <van-cell v-for="(item, index) in list" :key="index" :title="item.name" /> </van-list> </div> </template> <script> export default { data() { return { list: [], // 存储数据的数组 loading: false, // 控制加载状态 finished: false, // 是否已加载完毕 page: 1, // 当前页码 pageSize: 10, // 每页的数据条数 }; }, methods: { onLoad() { // 异步更新数据 setTimeout(() => { this.fetchData().then((newItems) => { if (newItems.length === 0) { this.finished = true; // 如果没有新数据，则标记为完成 } else { this.list.push(...newItems); this.page++; // 增加页码以便下次请求新的分页数据 } this.loading = false; // 加载完成后关闭加载状态 }); }, 500); // 模拟网络延迟 }, fetchData() { // 模拟异步获取数据的方法 const start = (this.page - 1) * this.pageSize; const end = this.page * this.pageSize; return new Promise((resolve) => { resolve( Array.from({ length: Math.min(10, end - start) }).map((_, i) => ({ name: `Item ${(start + i + 1)}` })) ); }); } } }; </script> <style scoped> .scroll-container { height: calc(100vh - 100px); /* 设置高度 */ overflow-y: auto; /* 启用垂直滚动 */ } </style> ``` 上述代码展示了如何使用 `List` 和 `Cell` 组件来实现数据懒加载的功能。其中的关键点在于配置 `v-model` 属性绑定加载状态以及设置 `@load` 方法响应用户滚动行为[^4]。 --- #### 配置说明 - **`v-model`**: 表示当前是否处于加载状态。当值为 `true` 时会显示加载动画；当加载结束需将其设回 `false`。 - **`:finished`**: 标记是否有剩余未加载的数据。如果全部数据已经展示出来则应将此属性设为 `true`。 - **`@load`**: 用户触底时自动调用的回调函数，在这里可以发起 API 请求或者模拟数据填充逻辑。 --- #### 扩展功能 除了基本的懒加载外，还可以结合其他特性进一步增强体验效果，比如加入下拉刷新功能： ##### 下拉刷新与上拉加载组合实例 ```javascript import { PullRefresh, List, Cell } from 'vant'; Vue.use(PullRefresh).use(List).use(Cell); // 在模板部分增加 pull-refresh 包裹层 <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list ...></van-list> </van-pull-refresh> ``` 在此基础上只需额外维护一个布尔型变量 `refreshing` 即可控制刷新过程中的交互反馈。 --- ### 性能考虑 对于大规模数据集而言，单纯依赖前端渲染可能会带来较大的内存消耗风险。因此建议开发者合理调整每次返回的结果数量（即每页大小），并通过服务端分页机制减少单次传输的压力[^3]。 ---