1、vue3 闭包滚动函数的使用
js 调用也基本雷同
// 滚动Tab组件const scoreTabRef = ref()// 滚动的选项const scrollOption = ref({// 滚动的Dom元素scrollDom: null,// 滚动的时间间隔scrollInterval: 1500,// 滚动的距离scrollSep: 100,// 滚动历时时间scrollDuration: 1000})const autoScroll = ref()onMounted(() => {// 初始化，获取某个组件的滚动的dom元素（设置了高度的div）scrollOption.value.scrollDom = scoreTabRef.value.$el.querySelector('.v-table__wrapper')// 闭包函数，传输滚定的选项autoScroll.value = tool.autoScroll(scrollOption.value)// 执行闭包函数的滚动方法autoScroll.value.startScroll()})onUnmounted(() => {// 销毁页面，也销毁闭包内的定时器autoScroll.value.destoryScroll()})
vue3各组件内互不影响
2 定义 tool.js 的平滑滚动闭包函数
闭包函数仅需关心参数
export const tool = {// 自动滚动闭包函数autoScroll: (scrollOptionParam) => {// 滚动选项let scrollOption = Object.assign({// 滚动的Dom元素scrollDom: null,// 滚动的时间间隔scrollInterval: 1500,// 滚动的距离scrollSep: 50,// 滚动历时时间scrollDuration: 1000},scrollOptionParam)// 滚动临时结果let scrollResult = {scrollTimer: null,pauseTimer: null}// 实际滚动方法const scrollFun = () => {// 如果定时器存在if (scrollResult.scrollTimer) {// 则先清除clearInterval(scrollResult.scrollTimer)scrollResult.scrollTimer = null}scrollResult.scrollTimer = setInterval(() => {// 获取当前滚动条距离顶部高度const scrollTop = scrollOption.scrollDom.scrollTopconst temp = scrollTop + scrollOption.scrollSepsmoothScroll(scrollOption.scrollDom, temp, scrollOption.scrollDuration)}, scrollOption.scrollInterval)}// 平滑滚动效果const smoothScroll = (element, targetY, duration) => {const startY = element.scrollTopconst distance = targetY - startYconst startTime = performance.now()const scrollHeight = element.scrollHeightconst clientHeight = element.clientHeightconst canScroll = scrollHeight - clientHeightfunction scroll(currentTime) {const elapsed = currentTime - startTimeconst progress = Math.min(elapsed / duration, 1)const easeProgress = progress * (2 - progress)const currentY = startY + distance * easeProgresselement.scrollTop = currentY// 如果已经达到目标位置或者达到持续时间，停止动画if (progress < 1 && Math.abs(currentY - targetY) > 1) {requestAnimationFrame(scroll)} else {element.scrollTop = targetY // 确保最终位置}// 距离顶部高度 大于等于 滚动长度if (canScroll <= targetY) {// 滚动到底部 停止定时器clearInterval(scrollResult.scrollTimer)scrollResult.scrollTimer = nullscrollOption.scrollDom.scrollTop = 0// 一秒后重开定时器setTimeout(() => {scrollFun()}, 1000)}}requestAnimationFrame(scroll)}const pauseScroll = () => {// 定时器不为空if (scrollResult.scrollTimer) {// 清除定时器clearInterval(scrollResult.scrollTimer)scrollResult.scrollTimer = null// 一秒钟后重新开始定时器scrollResult.pauseTimer = setTimeout(() => {scrollFun()}, 2000)}}return {startScroll: () => {const scrollHeight = scrollOption.scrollDom.scrollHeightconst clientHeight = scrollOption.scrollDom.clientHeightconst scroll = scrollHeight - clientHeight// 滚动长度为0，则无法实现自动滚动if (scroll === 0) {return}// 触发滚动方法scrollFun()// 去除点击监听scrollOption.scrollDom.removeEventListener('click', pauseScroll)// 重设点击监听scrollOption.scrollDom.addEventListener('click', pauseScroll, false)},destoryScroll: () => {// 清理定时器clearTimeout(scrollResult.pauseTimer)scrollResult.pauseTimer = nullclearInterval(scrollResult.scrollTimer)scrollResult.scrollTimer = null// 清理点击监听scrollOption.scrollDom.removeEventListener('click', pauseScroll)}}}
}
