vantList触底加载和刷新封装

Vant 是一款轻量、简洁的移动端组件库，广泛应用于 Vue.js 开发项目中。对于 Vant 的 `van-list` 组件来说，它支持“触底加载”功能，并可以结合其他组件如 `van-pull-refresh` 实现下拉刷新的功能。 以下是关于如何封装一个通用的触底加载和刷新逻辑的简要说明： ### 封装思路 1. **触底加载** 使用 `van-list` 提供的事件触发机制，当用户滚动到页面底部时自动触发加载更多数据的操作。通过设置 `finished`, `error`, 和 `immediate-check` 等属性控制加载状态。 2. **下拉刷新** 利用 `van-pull-refresh` 来绑定下拉刷新的行为，在下拉动作完成后重新获取最新的数据列表并更新视图内容。 #### 示例代码 ```vue <template> <div class="content"> <!-- 下拉刷新 --> <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> <!-- 上滑加载 --> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" > <div v-for="(item, index) in listData" :key="index">{{ item }}</div> </van-list> </van-pull-refresh> </div> </template> <script> export default { data() { return { isLoading: false, loading: false, finished: false, listData: [], // 存储数据的数组 page: 1, // 当前页码，默认从第一页开始请求数据 }; }, methods: { onRefresh() { this.page = 1; // 每次刷新都返回初始值 this.listData = []; // 清空原有数据 // 调用模拟API请求新数据 setTimeout(() => { this.getData(); this.isLoading = false; }, 500); // 延迟时间仅作为演示用途 }, onLoad() { if (this.finished || !this.loading) { return; } // 加载下一页的数据 this.page += 1; // 同样调用接口获取后续数据 setTimeout(() => { this.getData(); this.loading = false; // 结束本次加载操作 }, 500); }, getData() { const mockItems = Array.from({ length: Math.ceil(Math.random() * 6)}, (_, i) => `Item ${(this.page - 1) * 8 + i}` ); console.log(mockItems); // 如果当前已经取得全部数据，则停止继续加载标志位改为 true； if (mockItems.length === 0){ this.finished = true; return ; } // 更新现有list数据 this.listData.push(...mockItems); } } }; </script> ``` 上述示例展示了基于 Vant 的基本上下文切换模式以及动态加载功能的具体实现方式。