简单方法实现Vue 无限滚动组件示例
作者：腹黑霸道城乡结合部王铁牛 发布时间：2023-07-02 16:50:14
标签：Vue,无限滚动,滚动组件
1. 前言
对于列表类型的大量数据，前端展示往往采用 分页 和 无限滚动 的方式来展示，对于用户来说，鼠标滚轮和触控屏使滚动行为要比点击更快更容易。 element-plus 组件库提供了简单的 vue 指令，就可以轻易的实现
但是 element-plus 只支持无限向下滚动，不支持无限向上滚动，同时也没缺少丰富的 钩子函数，我们无法在这个基础上更好地 利用和改造滚动过程，所以，我们可以自己封装一个更具有个性化的组件
2. 整体思路
首先，外部的盒子会 隐藏 内部的盒子 溢出的部分
内部盒子的视图展示由数据提供，每当触发向上刷新或者向下刷新的时候，及时更新数据，最好的方式是使用 数组 维护所有的数据源，触发刷新的时候，只需要 操作数组 就可以了
怎么界定 向上刷新：这个很简单，只要滚动的高度接近于 0，就视作向上刷新
怎么界定 向下刷新 呢？
scrollTop：滚动条滚动距离scrollHeight：滚动条的实际高度clientHeight：元素的高度
随着滚动条滚到底部，此时 scrollTop + clientHeight = scrollHeight，那么此时就可以判断到达底部了
开始
const app = createApp(App);
app.directive('infinite-scroll', {
mounted(el, binding) {},
});
为什么使用自定义指令实现？
自定义指令 相对于 组件 来说能够更好地操作dom元素
el可以访问被添加指令的元素通过
binding.value可以访问调用指令时传递的参数
<ul v-infinite-scroll="{}"> // 配置参数
<li v-for="i in dataArr">{{ i }}, len: {{ dataArr.length }}</li>
</ul>
那么我们整体结构和整体思路就有了，就不难写出如下代码：
// 为 el 单独指定类型
type InfiniteScrollEl = HTMLElement & {
// 给 el 添加一个存储变量的空间
[__SCOPE__]: {
onScroll: () => void;
};
};
interface DirectiveOpt {
itemHeight: number; /// 内部每一列数据的高度
rate: number; // 每次更新刷新数据的频率
load: (dir: 'down' | 'up') => void; // 维护数据源的函数
}
// 获取并初始化配置选项
const getOptions = (binding: DirectiveBinding<DirectiveOpt>) => {
const itemHeight = binding.value.itemHeight || 60;
const rate = binding.value.rate || 1;
const load = binding.value.load || (() => {});
return { itemHeight, rate, load };
};
app.directive('infinite-scroll', {
async mounted(el: InfiniteScrollEl, binding: DirectiveBinding<DirectiveOpt>) {
await nextTick(); // 确保父元素加载完毕
const { rate, load } = getOptions(binding);
const onScroll = () => {
// 向下刷新
if (el.scrollTop + el.clientHeight >= el.scrollHeight) {
for (let i = 0; i < rate; i++) {
load('down');
}
}
// 向上刷新
if (el.scrollTop <= 0) {
for (let i = 0; i < rate; i++) {
load('up');
}
}
};
el[__SCOPE__] = {
onScroll,
};
el.addEventListener('scroll', onScroll);
},
unmounted(el) {
const { onScroll } = el[__SCOPE__];
el.removeEventListener('scroll', onScroll);
},
});
在组件被完全渲染完毕的时候，立即给 el 添加滚动事件 的处理函数，同时将这个回调函数挂载在 el 上，组件被销毁的时候，删除滚动事件
调用：
<script lang="ts" setup>
import { reactive } from 'vue';
const dataArr = reactive([1, 2, 3, 4, 5]);
let i = 0;
const load = (dir: 'down' | 'up') => {
if (dir === 'down') {
dataArr.push(dataArr.length + 1);
} else {
dataArr.unshift(i--);
}
};
</script>
<template>
<ul v-infinite-scroll="{ load, itemHeight: 60 }">
<li v-for="i in dataArr">{{ i }}, len: {{ dataArr.length }}</li>
</ul>
</template>
<style scoped>
ul {
padding: 0;
margin: 0;
width: 400px;
height: 200px;
overflow: auto;
}
li {
box-sizing: border-box;
list-style: none;
margin-bottom: 10px;
height: 50px;
background-color: skyblue;
text-align: center;
line-height: 50px;
}
</style>
此时会带来诸多 bug：
第一向下滚动的时候：此时的
scrollTop === 0，会触发向上刷新当滚动条位于顶部的时候无法向上刷新，因为这个时候
scrollTop === 0，向上滚动滚轮无法触发滚动事件
这里的解决方案有很多种，我们采用一种比较简单易懂的方法：
组件加载完毕的时候，给列表顶部 预留一点位置，这样不会导致第一次向上滚动无法触发滚动事件，每次向上滚动的时候，列表顶部刷新多少数据，就让列表的 scrollTop 位于 新数据与旧数据的分界处
async mounted(el: InfiniteScrollEl, binding: DirectiveBinding<DirectiveOpt>) {
// ...
const { rate, load, itemHeight } = getOptions(binding);
el.scrollTop = itemHeight; // 组件加载完毕，让列表视口顶部为第二项数据
const onScroll = () => {
if (el.scrollTop + el.clientHeight >= el.scrollHeight - 10) {
for (let i = 0; i < rate; i++) {
load('down');
}
await nextTick(); // 等待新增的元素加载完毕
}
if (el.scrollTop <= 10) {
for (let i = 0; i < rate; i++) {
load('up');
}
await nextTick(); // 等待新增的元素加载完毕
el.scrollTop = rate * itemHeight;
}
};
// ...
},
为了解决 滚动条位于顶部的时候无法向上刷新，在触发向上滚动的时候，立即改变列表 scrollTop 值，让列表视口顶部处于 刷新的数据的底部，这样就模拟了模拟了向上刷新的过程了
此外为了防止滚动过程的卡顿，我们让刷新条件多了 10px 的 缓冲区域
3. 钩子函数
3.1 获取偏移初始位置的像素值
很多小伙伴可能会问了？这个值不就是 scrollTop？真的是这样的吗
一旦触发向上更新，原先 scrollTop 记录的位置随着新数据的增加被 挤下来，那么新的 scrollTop 值代表的一定不是原先位置了
我们得从 getOptions 中多添加一个处理 获取偏移值的函数，这个函数在每次 onScroll 执行完毕的时候触发
async mounted(el: InfiniteScrollEl, binding: DirectiveBinding<DirectiveOpt>) {
// ...
+ const { rate, load, itemHeight, scrolledCb } = getOptions(binding);
+ let topAddedPx = 0; // 顶部新增的高度
+ let offset = 0; // 偏移值
const onScroll = async () => {
if (el.scrollTop + el.clientHeight >= el.scrollHeight - 10) {
for (let i = 0; i < rate; i++) {
load('down');
+ offset = el.scrollTop - itemHeight - topAddedPx;
}
await nextTick(); // 等待新增的元素加载完毕
}
if (el.scrollTop <= 10) {
for (let i = 0; i < rate; i++) {
load('up');
+ topAddedPx += itemHeight;
}
await nextTick(); // 等待新增的元素加载完毕
el.scrollTop = rate * itemHeight;
}
+ offset = el.scrollTop - itemHeight - topAddedPx;
+ scrolledCb(offset);
};
// ...
},
首先我们声明了两个变量 offset 获取实时的偏移值，topAddedPx 记录向上刷新时候新增的高度
在 onScroll 结束的时候 offset 等于 此时的位置 减去 向上刷新时候新增的高度，但是别忘了还要减去 itemHeight，因为在组件初始化的时候，我们预留了一个 itemHeight 的高度
调用：
<script lang="ts" setup>
// ...
const scrolledCb = (offset: number) => {
console.log(offset);
};
</script>
<template>
<ul v-infinite-scroll="{ load, itemHeight: 60, scrolledCb }">
<li v-for="i in dataArr">{{ i }}, len: {{ dataArr.length }}</li>
</ul>
</template>
3.2 获取开始滚动和结束滚动的钩子函数
有时候，我们需要在 监听 开始滚动 和 结束滚动 的特定时刻
首先，在 getOptions 中多添加一个处理 获取切换滚动状态时刻的函数
async mounted(el: InfiniteScrollEl, binding: DirectiveBinding<DirectiveOpt>) {
// ...
const { rate, load, itemHeight, scrolledCb, scrollingCb } = getOptions(binding);
// ...
let isScrolling = ref<boolean>(false); // 记录是否触发滚动
let isNotFirst = false; // 第一次滚动不触发
let timer: NodeJS.Timeout | null = null;
// 监听是否滚动，如果监听值改变，立即触发滚动时刻的回调函数
watch(isScrolling, () => {
scrollingCb(isScrolling.value);
});
const onScroll = async () => {
if (isNotFirst) isScrolling.value = true;
isNotFirst = true;
timer && clearTimeout(timer);
timer = setTimeout(() => {
isScrolling.value = false;
}, 200);
// ...
};
// ...
},
滑动滚轮，此时立即触发滚动的回调函数，触发
scrollingCb，并开启一个定时器，如果在200ms内没有再次滚动就断定为停止滚动，再次触发scrollingCb、如果在滚动开始的
200ms内再次滑动滚轮，清空定时器，重新计时
调用：
<script lang="ts" setup>
const scrollingCb = (isScrolling: boolean) => {
console.log(isScrolling);
};
</script>
<template>
<ul v-infinite-scroll="{ load, itemHeight: 60, scrollingCb }">
<li v-for="i in dataArr">{{ i }}, len: {{ dataArr.length }}</li>
</ul>
</template>
4. 完整代码
还可以设置 隐藏滚动条，让无限滚动的过程变得更加自然，只需要在使用 无限滚动指令 的元素上添加 element::-webkit-scrollbar { display: none; }
const __SCOPE__ = 'scope';
// 为 el 单独指定类型
type InfiniteScrollEl = HTMLElement & {
// 给 el 添加一个存储变量的空间
[__SCOPE__]: {
onScroll: () => void;
};
};
interface DirectiveOpt {
itemHeight: number; /// 内部每一列数据的高度
rate: number; // 每次更新刷新数据的频率
load: (dir: 'down' | 'up') => void; // 维护数据源的函数
scrolledCb: (offset: number) => void; // 获取偏移值
scrollingCb: (isScrolling: boolean) => void; // 获取改变滚动状态的时刻
}
// 获取并初始化配置选项
const getOptions = (binding: DirectiveBinding<DirectiveOpt>) => {
const itemHeight = binding.value.itemHeight || 60;
const rate = binding.value.rate || 1;
const load = binding.value.load || (() => {});
const scrolledCb = binding.value.scrolledCb || (() => {});
const scrollingCb = binding.value.scrollingCb || (() => {});
return { itemHeight, rate, load, scrolledCb, scrollingCb };
};
app.directive('infinite-scroll', {
async mounted(el: InfiniteScrollEl, binding: DirectiveBinding<DirectiveOpt>) {
await nextTick();
const { rate, load, itemHeight, scrolledCb, scrollingCb } = getOptions(binding);
el.scrollTop = itemHeight;
let topAddedPx = 0;
let offset = 0;
let isScrolling = ref<boolean>(false);
let isNotFirst = false;
let timer: NodeJS.Timeout | null = null;
watch(isScrolling, () => {
scrollingCb(isScrolling.value);
});
const onScroll = async () => {
if (isNotFirst) isScrolling.value = true;
isNotFirst = true;
timer && clearTimeout(timer);
timer = setTimeout(() => {
isScrolling.value = false;
}, 200);
if (el.scrollTop + el.clientHeight >= el.scrollHeight - 10) {
for (let i = 0; i < rate; i++) {
load('down');
offset = el.scrollTop - itemHeight - topAddedPx;
}
await nextTick(); // 等待新增的元素加载完毕
}
if (el.scrollTop <= 10) {
for (let i = 0; i < rate; i++) {
load('up');
topAddedPx += itemHeight;
}
await nextTick(); // 等待新增的元素加载完毕
el.scrollTop = rate * itemHeight;
}
offset = el.scrollTop - itemHeight - topAddedPx;
scrolledCb(offset);
};
el[__SCOPE__] = {
onScroll,
};
el.addEventListener('scroll', onScroll);
},
unmounted(el) {
const { onScroll } = el[__SCOPE__];
el.removeEventListener('scroll', onScroll);
},
});
来源：https://juejin.cn/post/7159576432379691038
0
投稿猜你喜欢
- 插入视图的条件: 1.如果视图是基于一个基础表产生的,那么这就称为非连接视图,所有的非连接视图都是可以更新的,也就是说可以在该视图上进行,I
- 本文实例讲述了Python编程对列表中字典元素进行排序的方法。分享给大家供大家参考，具体如下：内容目录：1. 问题起源2. 对列表中的字典元
- 任何一位数据库程序员都会有这样的体会：高通信量的数据库驱动程序中，一条糟糕的SQL查询语句可对整个应用程序的运行产生严重的影响，其不仅消耗掉
引言首先来一段简单的代码逻辑热身，下面的代码大家觉得应该会打印什么呢？type OKR struct { id- //前一阵子以为学习需要就在自己的本本上装了个mysql数据库。今天想把结合jsp做的项目拿到学校机器上用用，但发现数据库数据怎么迁移，首先
- 调用百度API获取经纬度信息。import requestsimport jsonaddress = input('请输入地点：&#
- 本文实例讲述了PHP判断是否微信访问的方法。分享给大家供大家参考，具体如下：在开发中有时需要禁止或者仅允许微信浏览器进行访问，则此时就需要对
- 0x00：事先说明你已经攻陷了对方主机且获得了最高权限。对方的本地防火墙会丢弃所有的外来数据包。这个后门不会仅绑定在某一个端口上。这段代码很
- python list筛选包含字符的字段l = [‘123a',‘456b',‘789c']ll = [s for
- HTML表单是网站交互性的经典方式。 本章将介绍如何用Django对用户提交的表单数据进行处理。一、HTTP 请求HTTP协议以"
- 理解一个算法最快，最深刻的做法，我觉着可能是自己手动实现，虽然项目中不用自己实现，有已经封装好的算法库，供我们调用，我觉着还是有必要自己亲自
- 注：代码用 jupyter notebook跑的，分割线线上为代码，分割线下为运行结果1.导入库生成缺失值通过pandas生成一个6行4列的
- 本文实例讲述了Python实现的排列组合计算操作。分享给大家供大家参考，具体如下：1. 调用 scipy 计算排列组合的具体数值>&g
- 一．思路1.整体思路2.代码思路思路很简单，就是用python发送请求，提取响应体中的状态码加以判断，最后保存到本地txt文本中，以实现网站
- 我国移动互联网进入了飞速发展阶段，互联网人才日益受到企业的重视，其中PHP开发人才便是其中之一，在互联网旅游、金融、餐饮、娱乐、社交等一些新
- 项目场景：在使用selenium模块进行数据爬取时，通常会遇到爬取iframe中的内容。会因为定位的作用域问题爬取不到数据。问题描述：我们以
- 最近在看吴恩达的机器学习课程，自己用python实现了其中的logistic算法，并用梯度下降获取最优值。logistic分类是一个二分类问
- 先上代码：import tensorflow as tfx = tf.ones(shape=[100, 200], dtype=tf.int
- 对于个人网站来说，受到建站条件的制约，Access数据库成了广大个人网站站长的首选。然而，Access数据库本身存在很多安全隐患，攻击者一旦
- 在SQL Server 中插入一条数据使用Insert语句，但是如果想要批量插入一堆数据的话，循环使用Insert不仅效率低，而且会导致SQ
