在大屏或者某些不常使用鼠标交互的页面,数据在定时刷新,如果有个列表数据过多,需要数据自己滚动展示。这里写个通用指令,需要的地方加上即可,轻量。
功能
若容器有滚动条则开启自动滚动,鼠标移入时停止,鼠标移除时继续滚动,可设置自动滚动的动画延迟多久开始启动。目前只支持y方向的,x方向自行扩展,懒得写,加起来也简单。
代码
/**
* author: yf
* date: 20241219
* 列表自动滚动 - 目前只支持 y方向,暂时没有x方向的需求
* 功能:
* 若容器有滚动条则开启自动滚动,鼠标移入时停止,鼠标移除时继续滚动
* 使用方式:
* 方式一:在滚动节点上使用默认配置
v-auto-scroll
* 方式二:完整配置
v-auto-scroll = {
targetSelector: '.el-table__body-wrapper', // 当前指令挂载节点内部的滚动盒子,使用 el.querySelector(targetSelector) 查找,节点不存在则使用 el 节点
delayTime: 1000, // 自动滚动开启的延迟时间,单位 ms
speed: 2, // 自动滚动速度,值越小滚动速度越快,最小速度为 1
interval: 1 // 每次自动滚动时移动的距离,单位px - 注意:必须是正整数
}
*/
Vue.directive('auto-scroll', {
inserted: function (el, binding) {
// console.log(el, binding, vnode);
// 获取配置参数
let {
targetSelector = '',
delayTime = 1000, // 自动滚动开启的延迟时间,单位 ms
speed = 2, // 自动滚动速度,值越小滚动速度越快,最小速度为 1
interval = 1 // 每次自动滚动时移动的距离,单位px - 注意:必须是正整数
} = binding.value || {};
// 正整数处理
interval = Math.abs(Math.ceil(interval))
el._customData = {}; // 需要移除的
let disabledScroll = false // 禁止滚动
let delayTimeSum = 0 // 累计时间,用于判断是否达到延迟时间
// 滚动元素
let scrollTarget = targetSelector ? el.querySelector(targetSelector) : ''
scrollTarget = scrollTarget || el
if (!scrollTarget) return
// 事件处理
let customEvent = {
mouseover: function () {
disabledScroll = true
},
mouseout: function () {
disabledScroll = false
delayTimeSum = 0 // 清空
}
}
// 移入时关闭自动滚动
el.addEventListener('mouseover', customEvent.mouseover, false)
// 移出时开启自动滚动
el.addEventListener('mouseout', customEvent.mouseout, false);
// 自动滚动
let preTime = Date.now();
let curTime = null;
let diffTime = 1000 / 60 * speed; // 动画间隔
let autoScroll = () => {
if (scrollTarget.scrollHeight <= scrollTarget.clientHeight) return // 无滚动条,不具备滚动条件
if (disabledScroll) return
// 判断滚动条是否到底部
if (scrollTarget.scrollHeight - scrollTarget.scrollTop === scrollTarget.clientHeight) {
scrollTarget.scrollTop = 0
} else {
scrollTarget.scrollTop = scrollTarget.scrollTop + interval
}
}
(function animloop() {
curTime = Date.now()
if (curTime - preTime > diffTime) {
// 在延迟时间内不执行动画
if (delayTimeSum >= delayTime) {
autoScroll();
} else {
delayTimeSum += curTime - preTime
}
preTime = curTime
}
el._customData.raId = requestAnimationFrame(animloop);
})()
el._customData.customEvent = customEvent
},
/* eslint-disable no-unused-vars */
unbind(el) {
/* eslint-enable no-unused-vars */
// 解绑
let _customData = el._customData;
if (!el || !_customData) return;
cancelAnimationFrame(_customData.raId)
el.removeEventListener('mouseover', _customData.customEvent.mouseover)
el.removeEventListener('mouseout', _customData.customEvent.mouseout)
}
});
效果如下
方式一:直接添加到滚动盒子上
<ul class="test-box" v-auto-scroll>
<li v-for="item in 20" :key="item">{{item}}</li>
</ul>
GIF 2024-12-19 17-44-16.gif
方式二: element-ui 的 el-table
v-auto-scroll="{
targetSelector:'.el-table__body-wrapper'
}
image.png
GIF 2024-12-19 17-33-45.gif
若对你有帮助,请点个赞吧,若能打赏不胜感激,谢谢支持!
本文地址:https://www.jianshu.com/p/e43ceee4aeca?v=1734601770680,转载请注明出处,谢谢。
网友评论