vue3+ts 学习笔记(3-1)页面上拉加载分页实现方案
- 2026-03-25 18:52:41
vue3+ts 学习笔记(3-1)页面上拉加载分页实现方案围绕js的监听属性addEventListener，与vue中等同id的ref属性 实现当前盒子的滚动监听，根据盒子的高度和设定的阈值，来实现滚动触底时进行分页并调用接口功能 在使用监听滚动条时，我使用的防抖，防止高频次触发触底调用接口，大家在使用防抖或节流时，可根据自己习惯自行选择
git 仓库地址：https://gitee.com/xiaoli-account/vue3_ts.git
[参考文档]
(https://cn.vuejs.org/guide/reusability/custom-directives.html#custom-directives)
## 上拉加载分页实现思路
### 核心代码
/*** 滚动事件处理函数，检测是否滚动到底部* 使用防抖函数包装，防止重复调用接口*/const onScrollDebounce = debounce(function () {const scrollBox = scrollBoxRef.value;if (!scrollBox) return;const { scrollTop, clientHeight, scrollHeight } = scrollBox;// 判断是否滚动到底部（考虑阈值）if (scrollTop + clientHeight + props.threshold >= scrollHeight) {// console.log("判断是否滚动到底部（考虑阈值）");// 如果正在加载或已完成加载，则不处理if (loading.value || finished.value) return;loadMore();}}, props.throttleDelay); // 100ms的防抖延迟，确保节流和防抖都能发挥作用function useListener(open) {const scrollBox = scrollBoxRef.value;if (!scrollBox) return;if (open) {// console.log("创建滚动监听", scrollBox);scrollBox.addEventListener("scroll", onScroll, { passive: true });} else {// console.log("移除滚动监听", scrollBox);scrollBox.removeEventListener("scroll", onScroll, { passive: true });// 清理防抖定时器if (debounceTimer) {clearTimeout(debounceTimer);debounceTimer = null;}}}
本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。
