Vue3 實(shí)現(xiàn)一個(gè)無(wú)縫滾動(dòng)組件（支持鼠標(biāo)手動(dòng)滾動(dòng)）

前言

在日常開(kāi)發(fā)中，經(jīng)常遇到需要支持列表循環(huán)滾動(dòng)展示，特別是在數(shù)據(jù)化大屏開(kāi)發(fā)中，無(wú)縫滾動(dòng)使用頻率更為頻繁，在jquery時(shí)代，我們常用的無(wú)縫滾動(dòng)組件為liMarquee，在vue中已經(jīng)有vue-seamless-scroll組件（通過(guò)Vue2實(shí)現(xiàn)，不支持鼠標(biāo)手動(dòng)滾動(dòng)），但是在使用過(guò)程中，發(fā)現(xiàn)滾動(dòng)后會(huì)存在點(diǎn)擊事件失效的問(wèn)題，并且產(chǎn)品提了個(gè)需求，需要支持鼠標(biāo)手動(dòng)滾動(dòng)，也要支持自動(dòng)滾動(dòng)，于是痛定思痛，決定通過(guò)Vue3來(lái)實(shí)現(xiàn)該功能，該組件已經(jīng)實(shí)現(xiàn)上傳npm，可以直接安裝使用，鏈接在文尾。

實(shí)現(xiàn)

html部分

首先寫(xiě)一個(gè)基礎(chǔ)的list結(jié)構(gòu)，通過(guò)插槽接收外部傳入的list數(shù)據(jù)，因?yàn)樾枰獙?shí)現(xiàn)無(wú)縫滾動(dòng)，需要復(fù)制出同一份的Dom，在最外層監(jiān)聽(tīng)鼠標(biāo)hover和leave的狀態(tài)，以實(shí)現(xiàn)鼠標(biāo)hover暫停滾動(dòng)，綁定鼠標(biāo)滾動(dòng)事件，在鼠標(biāo)滾動(dòng)時(shí)記住滾動(dòng)的位置，在恢復(fù)自動(dòng)滾動(dòng)時(shí)能從當(dāng)前滾動(dòng)位置繼續(xù)滾動(dòng)。

<div class="custom-list" ref="scrollBody" @mouseenter="mouseenterFunc" @mouseleave="mouseleaveFunc"@mousewheel="mousewheelFunc"><div class="list-body" :class="{'list-body2': isHorizontal}" ref="listBody" :style="{ transform: getScrollDistance() }"><slot></slot></div><div class="list-body" :class="{'list-body2': isHorizontal}" ref="tBody" v-if="isCanScroll" :style="{ transform: getScrollDistance() }"><slot></slot></div>
</div>

實(shí)現(xiàn)邏輯

開(kāi)始

通過(guò)父級(jí)傳入的isHorizontal判斷是橫向滾動(dòng)，還是垂直滾動(dòng)

const start = () => {//判斷是否可以滾動(dòng)函數(shù)let isScrollFunc = (bodySize:number, listSize:number) => {if (bodySize > listSize) {scrollDistance.value = 0;isCanScroll.value = !1;}};isStop.value = !1;//判斷是否可以滾動(dòng)if (!isHorizontal.value) {isScrollFunc(bodyHeight.value, listHeight.value);} else {isScrollFunc(bodyWidth.value, listWidth.value);}if (isCanScroll.value) {run();}
}

開(kāi)始滾動(dòng)

計(jì)算目前滾動(dòng)的距離，并判斷需要滾動(dòng)的方向，計(jì)算下一步滾動(dòng)的距離。

const run = () => {//清空動(dòng)畫(huà)clearAnimation();animationFrame.value = window.requestAnimationFrame(() => {//滾動(dòng)主邏輯函數(shù)let main = (listSize:number, bodySize:number) => {let tempScrollDistance = Math.abs(scrollDistance.value);if (scrollDistance.value < 0) {let cc = 2 * listSize - bodySize;if (tempScrollDistance > cc) {scrollDistance.value = -(listSize - bodySize);}} else {scrollDistance.value = -listSize;}};//根據(jù)滾動(dòng)方向判斷使用高度或?qū)挾瓤刂菩Ч鹖f (!isHorizontal.value) {main(listHeight.value, bodyHeight.value);} else {main(listWidth.value, bodyWidth.value);}//判斷滾動(dòng)值if (!isStop.value) {if (props.scrollDirection === "top" ||props.scrollDirection === "left") {scrollDistance.value -= props.steep;} else if (props.scrollDirection === "bottom" ||props.scrollDirection === "right") {scrollDistance.value += props.steep;}run();}});
}

獲取滾動(dòng)樣式

通過(guò)translate實(shí)現(xiàn)列表平移，已實(shí)現(xiàn)平滑滾動(dòng)。

const getScrollDistance = () => {let style;if (!isHorizontal.value) {style = "translate(0px, " + scrollDistance.value + "px)";} else {style = "translate(" + scrollDistance.value + "px,0px)";}return style;
}
const clearAnimation = () => {if (animationFrame.value) {cancelAnimationFrame(animationFrame.value);animationFrame.value = null;}
}

鼠標(biāo)滾動(dòng)

鼠標(biāo)滾動(dòng)時(shí)實(shí)時(shí)計(jì)算滾動(dòng)的距離，可通過(guò)傳入的鼠標(biāo)滾動(dòng)速率來(lái)計(jì)算每次滾動(dòng)多少。

const mousewheelFunc = (e:any) => {if (!isCanScroll.value || !props.isRoller) {return false;}let dis = e.deltaY;if (dis > 0) {scrollDistance.value -= props.rollerScrollDistance;} else {scrollDistance.value += props.rollerScrollDistance;}run();
}

使用

該組件已上傳npm倉(cāng)庫(kù)，歡迎satrt使用

npm install @fcli/vue-auto-scroll --save-dev 來(lái)安裝在項(xiàng)目中使用
import VueAutoScroll from '@fcli/vue-auto-scroll';
const app=createApp(App)
app.use(VueAutoScroll);

使用示例：

<div class="content"><vue-auto-scroll :data="list" :steep="0.5" scrollDirection="top" :isRoller="true" :rollerScrollDistance="50"><div class="li" v-for="i in list" :key="i">{{ i }}</div></vue-auto-scroll>
</div>

屬性	屬性名稱	類型	可選值
steep	滾動(dòng)的速率	number	為正數(shù)即可
scrollDirection	滾動(dòng)的方向	string	top ,bottom,left,right
isRoller	是否可以使用滾輪滾動(dòng)	boolean	true,false
rollerScrollDistance	滾輪滾動(dòng)的速率	number	（isRoller 必須為 true）為正數(shù)即可
data	接收異步數(shù)據(jù)	array	同步任務(wù)可不傳

注： 當(dāng)scrollDirection 為top或bottom時(shí)，一定要為 vue-auto-scroll 組件設(shè)置高度。 當(dāng)scrollDirection 為left或right時(shí)，一定要為 vue-auto-scroll 組件設(shè)置寬度。并為嵌入vue-auto-scroll中的標(biāo)簽設(shè)置樣式為display:inline-block; 示例樣式名為list-item可以更改為其他類名。當(dāng)scrollDirection 為left或right時(shí),是基于行內(nèi)元素的“white-space: nowrap;” 來(lái)控制強(qiáng)制不換行的。有可能會(huì)影響其內(nèi)部的文字排列?？梢栽趌ist-item 層添加 white-space: normal; 來(lái)處理給問(wèn)題。并為其添加固定寬度，以保證文字可以正常換行及插件的正確計(jì)算與顯示。如果沒(méi)有為其添加固定寬度，會(huì)造成插件獲取父容器層的寬度值錯(cuò)誤，導(dǎo)致顯示混亂

git地址：https://gitee.com/fcli/vue-auto-scroll.git