10-页面滚动事件

### 实现和处理 `van-list` 组件中的滚动事件 为了实现在 `van-list` 组件中处理滚动事件的功能，通常会利用 Vant 提供的内置事件以及 Vue 的生命周期钩子函数。具体来说，在 `van-list` 中有一个名为 `load` 的事件用于检测列表是否已滚动到接近底部并自动触发加载更多数据的操作[^2]。 然而，如果希望更精细地控制滚动行为或响应其他类型的滚动动作，则可以在父容器上监听原生 DOM 滚动事件，并通过计算当前滚动位置来执行特定逻辑： ```html <template> <div ref="scrollContainer" @scroll="handleScroll"> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> <!-- 列表示例 --> <van-cell v-for="(item, index) in list" :key="index">{{ item }}</van-cell> </van-list> </div> </template> <script> export default { data() { return { loading: false, finished: false, list: [], // 其他状态... }; }, methods: { onLoad() { // 异步更新数据 setTimeout(() => { for (let i = 0; i < 10; i++) { this.list.push(this.list.length); } // 加载完成关闭加载动画 this.loading = false; // 数据全部加载完毕后设置为 true 停止加载更多 if (this.list.length >= 40) { this.finished = true; } }, 500); }, handleScroll(event) { const scrollTop = event.target.scrollTop; const scrollHeight = event.target.scrollHeight; const clientHeight = event.target.clientHeight; console.log(`scrollTop:${scrollTop}, scrollHeight:${scrollHeight}, clientHeight:${clientHeight}`); // 当用户滚动至页面底部附近时可触发某些操作 if ((scrollTop + clientHeight) >= scrollHeight - 100) { console.log('接近底部'); // 可在此处调用接口请求新数据或其他业务逻辑 } // 如果需要阻止默认行为或者其他自定义处理也可以在这里进行 } } }; </script> ``` 此代码片段展示了如何在一个外部 div 容器内包裹 `van-list` 并为其绑定 `@scroll` 事件处理器 `handleScroll()` 方法。每当发生滚动时都会触发这个方法，并允许开发者基于当前位置做出反应，比如判断是否到达了文档末尾从而发起新的 API 请求以追加更多项目到现有列表里。