1、vue3 閉包滾動(dòng)函數(shù)的使用

js 調(diào)用也基本雷同

//  滾動(dòng)Tab組件const scoreTabRef = ref()//  滾動(dòng)的選項(xiàng)const scrollOption = ref({// 滾動(dòng)的Dom元素scrollDom: null,// 滾動(dòng)的時(shí)間間隔scrollInterval: 1500,// 滾動(dòng)的距離scrollSep: 100,// 滾動(dòng)歷時(shí)時(shí)間scrollDuration: 1000})const autoScroll = ref()onMounted(() => {// 初始化，獲取某個(gè)組件的滾動(dòng)的dom元素（設(shè)置了高度的div）scrollOption.value.scrollDom = scoreTabRef.value.$el.querySelector('.v-table__wrapper')// 閉包函數(shù)，傳輸滾定的選項(xiàng)autoScroll.value = tool.autoScroll(scrollOption.value)// 執(zhí)行閉包函數(shù)的滾動(dòng)方法autoScroll.value.startScroll()})onUnmounted(() => {// 銷毀頁面，也銷毀閉包內(nèi)的定時(shí)器autoScroll.value.destoryScroll()})

vue3各組件內(nèi)互不影響

2 定義 tool.js 的平滑滾動(dòng)閉包函數(shù)

閉包函數(shù)僅需關(guān)心參數(shù)

export const tool = {// 自動(dòng)滾動(dòng)閉包函數(shù)autoScroll: (scrollOptionParam) => {// 滾動(dòng)選項(xiàng)let scrollOption = Object.assign({// 滾動(dòng)的Dom元素scrollDom: null,// 滾動(dòng)的時(shí)間間隔scrollInterval: 1500,// 滾動(dòng)的距離scrollSep: 50,// 滾動(dòng)歷時(shí)時(shí)間scrollDuration: 1000},scrollOptionParam)// 滾動(dòng)臨時(shí)結(jié)果let scrollResult = {scrollTimer: null,pauseTimer: null}// 實(shí)際滾動(dòng)方法const scrollFun = () => {// 如果定時(shí)器存在if (scrollResult.scrollTimer) {// 則先清除clearInterval(scrollResult.scrollTimer)scrollResult.scrollTimer = null}scrollResult.scrollTimer = setInterval(() => {// 獲取當(dāng)前滾動(dòng)條距離頂部高度const scrollTop = scrollOption.scrollDom.scrollTopconst temp = scrollTop + scrollOption.scrollSepsmoothScroll(scrollOption.scrollDom, temp, scrollOption.scrollDuration)}, scrollOption.scrollInterval)}// 平滑滾動(dòng)效果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// 如果已經(jīng)達(dá)到目標(biāo)位置或者達(dá)到持續(xù)時(shí)間，停止動(dòng)畫if (progress < 1 && Math.abs(currentY - targetY) > 1) {requestAnimationFrame(scroll)} else {element.scrollTop = targetY // 確保最終位置}// 距離頂部高度  大于等于 滾動(dòng)長度if (canScroll <= targetY) {// 滾動(dòng)到底部 停止定時(shí)器clearInterval(scrollResult.scrollTimer)scrollResult.scrollTimer = nullscrollOption.scrollDom.scrollTop = 0// 一秒后重開定時(shí)器setTimeout(() => {scrollFun()}, 1000)}}requestAnimationFrame(scroll)}const pauseScroll = () => {// 定時(shí)器不為空if (scrollResult.scrollTimer) {// 清除定時(shí)器clearInterval(scrollResult.scrollTimer)scrollResult.scrollTimer = null// 一秒鐘后重新開始定時(shí)器scrollResult.pauseTimer = setTimeout(() => {scrollFun()}, 2000)}}return {startScroll: () => {const scrollHeight = scrollOption.scrollDom.scrollHeightconst clientHeight = scrollOption.scrollDom.clientHeightconst scroll = scrollHeight - clientHeight// 滾動(dòng)長度為0，則無法實(shí)現(xiàn)自動(dòng)滾動(dòng)if (scroll === 0) {return}// 觸發(fā)滾動(dòng)方法scrollFun()// 去除點(diǎn)擊監(jiān)聽scrollOption.scrollDom.removeEventListener('click', pauseScroll)// 重設(shè)點(diǎn)擊監(jiān)聽scrollOption.scrollDom.addEventListener('click', pauseScroll, false)},destoryScroll: () => {// 清理定時(shí)器clearTimeout(scrollResult.pauseTimer)scrollResult.pauseTimer = nullclearInterval(scrollResult.scrollTimer)scrollResult.scrollTimer = null// 清理點(diǎn)擊監(jiān)聽scrollOption.scrollDom.removeEventListener('click', pauseScroll)}}}
}