vue實(shí)現(xiàn)無(wú)縫滾動(dòng)手摸手教程
開(kāi)發(fā)背景
之前在Vue2項(xiàng)目中使用vue-seamless-scroll組件實(shí)現(xiàn)過(guò)如下圖的效果,最近要使用Vue3來(lái)實(shí)現(xiàn),找了一天沒(méi)有找到合適的組件,打算自己造個(gè)輪子,特次來(lái)分享下實(shí)現(xiàn)過(guò)程。
需求分析
- 通過(guò)使用類似下列代碼的方式實(shí)現(xiàn)
<Swiper> <SwiperSlide>111</SwiperSlide> <SwiperSlide>222</SwiperSlide> <SwiperSlide>333</SwiperSlide> <SwiperSlide>444</SwiperSlide> </Swiper>
- 實(shí)現(xiàn)自動(dòng)滾動(dòng)
- 實(shí)現(xiàn)無(wú)縫滾動(dòng)
- 鼠標(biāo)移入暫停,鼠標(biāo)移出繼續(xù)
實(shí)現(xiàn)思路
實(shí)現(xiàn)需求一
首先是需要兩個(gè)組件,這里姑且把父組件稱做Scroll組件,子組件稱作ScrollSlide組件。 父組件和子組件中均需要使用插槽,子組件的插槽內(nèi)容即是一個(gè)slide的內(nèi)容,具體內(nèi)容由使用者提供。
實(shí)現(xiàn)需求二
通過(guò)使用定時(shí)器setInteval持續(xù)讓元素向左偏移(translateX)。
實(shí)現(xiàn)需求三
通過(guò)在父組件中放置兩個(gè)<slot />
將使用者傳過(guò)來(lái)的插槽復(fù)制兩遍,正如上面的例子,傳入了四個(gè)Slide,但其實(shí)父組件中渲染了八遍,稱為兩組,當(dāng)向左偏移量 >= 所有子元素的寬度之和/2,說(shuō)明滾動(dòng)了一組,這時(shí)就可以把偏移量置為0,也就是讓他從頭開(kāi)始滾動(dòng),但此時(shí)無(wú)縫銜接到第二組之后又從頭開(kāi)始,視覺(jué)上看不出任何變化,這是我們也可以清除掉(clearInterval)為實(shí)現(xiàn)需求二而創(chuàng)造的定時(shí)器(setInterval)。
實(shí)現(xiàn)需求四
前面都說(shuō)了,使用 定時(shí)器(setInteval) 結(jié)合偏移(translateX) 實(shí)現(xiàn)滾動(dòng),那停止?jié)L動(dòng),自然就執(zhí)行clearInteval啦,那繼續(xù)滾動(dòng)也就繼續(xù)開(kāi)始執(zhí)行setInteval了。
擼起袖子開(kāi)始干
目錄規(guī)劃
|-------------------scroll | |----------index.vue | |----------scroll-slide.vue
- scroll/index.vue 為父組件
- scroll/scroll-slide.vue 為子組件
父組件的實(shí)現(xiàn)
這里用的是Vue3+TypeScript,先把基礎(chǔ)架子搭建起來(lái)
<script setup lang="ts"> </script> <template> <div class="vue-scroll"> <ul class="vue-scroll-wrap"></ul> </div> </template> <style lang="less" scoped> .vue-scroll{ overflow: hidden; cursor: pointer; .vue-scroll-wrap { padding:0; margin:0; white-space: nowrap; } } </style>
用了vue3
不用setup
怎么行呢?這里就直接使用setup語(yǔ)法糖
來(lái)實(shí)現(xiàn)。
我們假設(shè)ul
中有n個(gè)li
,并讓他們橫向排列
,.vue-scroll
設(shè)置了overflow:hidden;
,這時(shí)你就不難發(fā)現(xiàn),我們讓偏移的元素也就是ul,超出容器被隱藏。
接下來(lái)編寫(xiě)滾動(dòng)函數(shù)
<script setup lang="ts"> import { ref, Ref } from 'vue'; // 定時(shí)器 const timer:Ref<null|NodeJS.Timer> = ref(null); // 開(kāi)始滾動(dòng) const beginScroll = () => { // 滾動(dòng)容器 const vueScrollWrapDom: HTMLElement | null = document.querySelector(".vue-scroll-wrap"); // 滾動(dòng)容器的寬(所有子元素的寬之和) const overWidth = Array.from(document.querySelectorAll(".vue-scroll-wrap .vue-scroll-slide")) .map(e => e.clientWidth).reduce((a,b) => a + b); // 定義定時(shí)器開(kāi)始滾動(dòng) if(vueScrollWrapDom){ timer.value = setInterval(() => { // 獲取滾之前的滾動(dòng)距離 const translateXs = vueScrollWrapDom.style.transform.match(/translateX\((.*)px\)/); let oldTranslateX = translateXs ? Number(translateXs[1]) : 0; // 如果滾動(dòng)距離大于等于總距離的1/2,也就說(shuō)明滾完了第一組(總共有兩組來(lái)做無(wú)縫銜接),當(dāng)?shù)诙M開(kāi)始的時(shí)候讓滾動(dòng)距離置為0,從頭開(kāi)始 if(Math.abs(oldTranslateX) >= (overWidth / 2)) oldTranslateX = 0; // 設(shè)置滾動(dòng)距離 vueScrollWrapDom.style.transform = `translateX(${oldTranslateX - 1}px)`; },30) } } </script>
上述代碼注釋已經(jīng)寫(xiě)得非常詳細(xì)了,這里就不做過(guò)多解釋。接下來(lái)需要讓這個(gè)滾動(dòng)函數(shù)執(zhí)行,所以引入onMounted鉤子
,并調(diào)用滾動(dòng)方法。
<script setup lang="ts"> import { ref, onMounted, Ref } from 'vue'; // ... onMounted(() => { beginScroll(); }) </script>
這個(gè)時(shí)候父組件就已經(jīng)實(shí)現(xiàn)了自動(dòng)滾動(dòng),接下來(lái)要實(shí)現(xiàn),鼠標(biāo)移入停止?jié)L動(dòng),鼠標(biāo)移出繼續(xù)滾動(dòng)。
那首先就需要給div元素
綁定鼠標(biāo)移入移出事件,并在js
里面編寫(xiě)對(duì)應(yīng)方法。
<script setup lang="ts"> // ... // 停止?jié)L動(dòng)方法 const stopScroll = () => { if(timer.value) clearInterval(timer.value); } // 鼠標(biāo)移入 const onMouseEn = () => { beginScroll(); } // 鼠標(biāo)移出 const onMouseLe = () => { stopScroll(); } </script> <template> <div class="vue-scroll" @mouseenter="onMouseEn" @mouseleave="onMouseLe"> <!-- ... --> </div> </template>
這時(shí)我突發(fā)奇想,有些人就會(huì)反著來(lái),鼠標(biāo)移入開(kāi)始滾動(dòng),鼠標(biāo)移出停止?jié)L動(dòng),如果要把組件面向大眾使用,確實(shí)得考慮這個(gè)問(wèn)題,所以定義個(gè)boolean用來(lái)判斷是正常流程
還是騷操作
。
<script setup lang="ts"> // ... // 行為 true(鼠標(biāo)放上去暫停,移出滾動(dòng)) false(鼠標(biāo)放上去滾動(dòng),移出暫停) const behave = ref(true); // 修改鼠標(biāo)移入移出事件 const onMouseEn = () => { behave.value ? stopScroll() : beginScroll(); } const onMouseLe = () => { behave.value ? beginScroll() : stopScroll(); } </script>
為了組件的靈活性,定義一個(gè)boolean變量autoplay,用來(lái)判斷組件是否掛載完成之后自動(dòng)滾動(dòng),
在beginScroll
方法中,不難發(fā)現(xiàn),translateX(${oldTranslateX - n}px)
,n越大,滾動(dòng)速度越快,這里就把n剔出去,叫做speed,由父組件傳入。
綜上所述,父組件源碼經(jīng)收拾之后就是下面這樣:
<script setup lang="ts"> import { ref, onMounted, Ref } from 'vue'; // 組件接受的屬性 const props = defineProps({ // 是否自動(dòng)播放 autoplay:{ type:Boolean, default: true }, // 播放速度 1-10,越大越快,為防止填錯(cuò),將處理之后的結(jié)果用來(lái)播放速度 speed:{ type:Number, default:1 }, // 行為 true(鼠標(biāo)放上去暫停,移出滾動(dòng)) false(鼠標(biāo)放上去滾動(dòng),移出暫停,必須設(shè)置autoplay為false) behave:{ type:Boolean, default: true } }); // 定時(shí)器 const timer:Ref<null|NodeJS.Timer> = ref(null); // 真正的播放速度 const realSpeed = ref(1); // 開(kāi)始滾動(dòng) const beginScroll = () => { // 滾動(dòng)容器 const vueScrollWrapDom: HTMLElement | null = document.querySelector(".vue-scroll-wrap"); // 滾動(dòng)容器的寬(所有子元素的寬之和) const overWidth = Array.from(document.querySelectorAll(".vue-scroll-wrap .vue-scroll-slide")) .map(e => e.clientWidth).reduce((a,b) => a + b); // 定義定時(shí)器開(kāi)始滾動(dòng) if(vueScrollWrapDom){ timer.value = setInterval(() => { // 獲取滾之前的滾動(dòng)距離 const translateXs = vueScrollWrapDom.style.transform.match(/translateX\((.*)px\)/); let oldTranslateX = translateXs ? Number(translateXs[1]) : 0; // 如果滾動(dòng)距離大于等于總距離的1/2,也就說(shuō)明滾完了第一組(總共有兩組來(lái)做無(wú)縫銜接),當(dāng)?shù)诙M開(kāi)始的時(shí)候讓滾動(dòng)距離置為0,從頭開(kāi)始 if(Math.abs(oldTranslateX) >= (overWidth / 2)) oldTranslateX = 0; // 設(shè)置滾動(dòng)距離 vueScrollWrapDom.style.transform = `translateX(${oldTranslateX - realSpeed.value}px)`; },30) } } // 停止?jié)L動(dòng) const stopScroll = () => { if(timer.value) clearInterval(timer.value); } // 處理播放速度(為防止參數(shù)輸錯(cuò)做處理) const handleSpeed = (sped:number) => { if(sped < 1) return 1; if(sped > 10) return 10; return sped; } // 鼠標(biāo)移入 const onMouseEn = () => { props.behave ? stopScroll() : beginScroll(); } // 鼠標(biāo)移出 const onMouseLe = () => { props.behave ? beginScroll() : stopScroll(); } onMounted(() => { realSpeed.value = handleSpeed(props.speed); if(props.autoplay) beginScroll(); }) </script> <template> <div class="vue-scroll" @mouseenter="onMouseEn" @mouseleave="onMouseLe"> <ul class="vue-scroll-wrap"> <slot></slot> <slot></slot> </ul> </div> </template> <style lang="less" scoped> .vue-scroll{ overflow: hidden;cursor: pointer; .vue-scroll-wrap { padding:0;margin:0;white-space: nowrap;} } </style>
子組件的實(shí)現(xiàn)
父組件實(shí)現(xiàn)之后,子組件就很容易了。子組件只需要提供一個(gè)插槽可以放內(nèi)容就夠了。
子組件源碼如下:
<script setup lang="ts"></script> <template> <li class="vue-scroll-slide"> <slot></slot> </li> </template> <style lang="less" scoped> .vue-scroll-slide{ list-style: none;display:inline-block;} </style>
使用方法
父子組件都實(shí)現(xiàn)完成之后,接下來(lái)我們看一下怎么使用。
<script setup lang="ts"> // 1.首先引入兩個(gè)組件 import vueScroll from "@/components/vue-scroll/index.vue"; import vueScrollSlide from "@/components/vue-scroll/vue-scroll-slide.vue"; </script> <template> <!-- 2.使用組件 --> <vue-scroll :autoplay="true" :speed="1" :behave="true"> <vue-scroll-slide>111</vue-scroll-slide> <vue-scroll-slide>222</vue-scroll-slide> <vue-scroll-slide>333</vue-scroll-slide> </vue-scroll> </template> <style lang="less" scoped></style>
結(jié)語(yǔ)
好了,本次的分享就到此為止了。非常感謝你很有耐心的看完了,希望我這個(gè)小玩意能讓你有所收獲
更多關(guān)于vue無(wú)縫滾動(dòng)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- vue條件渲染列表渲染原理示例詳解
- antd vue表格可編輯單元格以及求和實(shí)現(xiàn)方式
- vue3實(shí)現(xiàn)無(wú)縫滾動(dòng)組件的示例代碼
- vue實(shí)現(xiàn)無(wú)縫滾動(dòng)的示例詳解
- vue實(shí)現(xiàn)消息向上無(wú)縫滾動(dòng)效果
- vue實(shí)現(xiàn)無(wú)限消息無(wú)縫滾動(dòng)
- vue實(shí)現(xiàn)簡(jiǎn)單無(wú)縫滾動(dòng)效果
- vue實(shí)現(xiàn)列表無(wú)縫滾動(dòng)效果
- vue實(shí)現(xiàn)列表垂直無(wú)縫滾動(dòng)
- vue實(shí)現(xiàn)列表無(wú)縫滾動(dòng)
- el-table動(dòng)態(tài)渲染列、可編輯單元格、虛擬無(wú)縫滾動(dòng)的實(shí)現(xiàn)
相關(guān)文章
vue自定義一個(gè)v-model的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue自定義一個(gè)v-model的實(shí)現(xiàn)代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06Vue響應(yīng)式原理深入解析及注意事項(xiàng)
Vue 最顯著的一個(gè)功能是響應(yīng)系統(tǒng) —— 模型只是普通對(duì)象,修改它則更新視圖。下面這篇文章主要給大家深入講解了關(guān)于Vue的響應(yīng)式原理,以及Vue響應(yīng)式的一些注意事項(xiàng),需要的朋友下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12Vite圖片資源打包優(yōu)化的實(shí)現(xiàn)
本文主要介紹了Vite圖片資源打包優(yōu)化的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04詳解Vue中l(wèi)ocalstorage和sessionstorage的使用
這篇文章主要介紹了詳解Vue中l(wèi)ocalstorage和sessionstorage的使用方法和經(jīng)驗(yàn)心得,有需要的朋友跟著小編參考學(xué)習(xí)下吧。2017-12-12