vue實現(xiàn)無縫滾動手摸手教程

更新時間：2023年03月05日 15:34:31 作者：webxue

這篇文章主要為大家介紹了vue實現(xiàn)無縫滾動手摸手教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

開發(fā)背景

之前在Vue2項目中使用vue-seamless-scroll組件實現(xiàn)過如下圖的效果，最近要使用Vue3來實現(xiàn)，找了一天沒有找到合適的組件，打算自己造個輪子，特次來分享下實現(xiàn)過程。

需求分析

通過使用類似下列代碼的方式實現(xiàn)

<Swiper>
    <SwiperSlide>111</SwiperSlide>
    <SwiperSlide>222</SwiperSlide>
    <SwiperSlide>333</SwiperSlide>
    <SwiperSlide>444</SwiperSlide>
</Swiper>

實現(xiàn)自動滾動
實現(xiàn)無縫滾動
鼠標移入暫停，鼠標移出繼續(xù)

實現(xiàn)思路

實現(xiàn)需求一

首先是需要兩個組件，這里姑且把父組件稱做Scroll組件，子組件稱作ScrollSlide組件。父組件和子組件中均需要使用插槽，子組件的插槽內容即是一個slide的內容，具體內容由使用者提供。

實現(xiàn)需求二

通過使用定時器setInteval持續(xù)讓元素向左偏移(translateX)。

實現(xiàn)需求三

通過在父組件中放置兩個<slot />將使用者傳過來的插槽復制兩遍，正如上面的例子，傳入了四個Slide，但其實父組件中渲染了八遍，稱為兩組，當向左偏移量 >= 所有子元素的寬度之和/2，說明滾動了一組，這時就可以把偏移量置為0，也就是讓他從頭開始滾動，但此時無縫銜接到第二組之后又從頭開始，視覺上看不出任何變化，這是我們也可以清除掉(clearInterval)為實現(xiàn)需求二而創(chuàng)造的定時器(setInterval)。

實現(xiàn)需求四

前面都說了，使用 定時器(setInteval) 結合偏移(translateX) 實現(xiàn)滾動，那停止?jié)L動，自然就執(zhí)行clearInteval啦，那繼續(xù)滾動也就繼續(xù)開始執(zhí)行setInteval了。

擼起袖子開始干

目錄規(guī)劃

|-------------------scroll
|
|----------index.vue
|
|----------scroll-slide.vue

scroll/index.vue 為父組件
scroll/scroll-slide.vue 為子組件

父組件的實現(xiàn)

這里用的是Vue3+TypeScript，先把基礎架子搭建起來

<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語法糖來實現(xiàn)。

我們假設ul中有n個li，并讓他們橫向排列，.vue-scroll設置了overflow:hidden;，這時你就不難發(fā)現(xiàn)，我們讓偏移的元素也就是ul，超出容器被隱藏。

接下來編寫滾動函數(shù)

<script setup lang="ts">
import { ref, Ref } from 'vue';
// 定時器
const timer:Ref<null|NodeJS.Timer> = ref(null);
// 開始滾動
const beginScroll = () => {
  // 滾動容器
  const vueScrollWrapDom: HTMLElement | null = document.querySelector(".vue-scroll-wrap");
  // 滾動容器的寬(所有子元素的寬之和)
  const overWidth = Array.from(document.querySelectorAll(".vue-scroll-wrap .vue-scroll-slide"))
    .map(e => e.clientWidth).reduce((a,b) => a + b);
  // 定義定時器開始滾動
  if(vueScrollWrapDom){
    timer.value = setInterval(() => {
      // 獲取滾之前的滾動距離
      const translateXs = vueScrollWrapDom.style.transform.match(/translateX\((.*)px\)/);
      let oldTranslateX = translateXs ? Number(translateXs[1]) : 0;
      // 如果滾動距離大于等于總距離的1/2，也就說明滾完了第一組(總共有兩組來做無縫銜接)，當?shù)诙M開始的時候讓滾動距離置為0，從頭開始
      if(Math.abs(oldTranslateX) >= (overWidth / 2)) oldTranslateX = 0;
      // 設置滾動距離
      vueScrollWrapDom.style.transform = `translateX(${oldTranslateX - 1}px)`;
    },30)
  }
}
</script>

上述代碼注釋已經(jīng)寫得非常詳細了，這里就不做過多解釋。接下來需要讓這個滾動函數(shù)執(zhí)行，所以引入onMounted鉤子，并調用滾動方法。

<script setup lang="ts">
import { ref, onMounted, Ref } from 'vue';
// ...
onMounted(() => {
    beginScroll();
})
</script>

這個時候父組件就已經(jīng)實現(xiàn)了自動滾動，接下來要實現(xiàn)，鼠標移入停止?jié)L動，鼠標移出繼續(xù)滾動。

那首先就需要給div元素綁定鼠標移入移出事件，并在js里面編寫對應方法。

<script setup lang="ts">
// ...
// 停止?jié)L動方法
const stopScroll = () => {
    if(timer.value) clearInterval(timer.value);
}
// 鼠標移入
const onMouseEn = () => {
  beginScroll();
}
// 鼠標移出
const onMouseLe = () => {
  stopScroll();
}
</script>
<template>
    <div class="vue-scroll" @mouseenter="onMouseEn" @mouseleave="onMouseLe">
        <!-- ... -->
    </div>
</template>

這時我突發(fā)奇想，有些人就會反著來，鼠標移入開始滾動，鼠標移出停止?jié)L動，如果要把組件面向大眾使用，確實得考慮這個問題，所以定義個boolean用來判斷是正常流程還是騷操作。

<script setup lang="ts">
// ...
// 行為 true(鼠標放上去暫停,移出滾動) false(鼠標放上去滾動,移出暫停)
const behave = ref(true);
// 修改鼠標移入移出事件
const onMouseEn = () => {
  behave.value ? stopScroll() : beginScroll();
}
const onMouseLe = () => {
  behave.value ? beginScroll() : stopScroll();
}
</script>

為了組件的靈活性，定義一個boolean變量autoplay，用來判斷組件是否掛載完成之后自動滾動，

在beginScroll方法中，不難發(fā)現(xiàn)，translateX(${oldTranslateX - n}px),n越大，滾動速度越快，這里就把n剔出去，叫做speed，由父組件傳入。

綜上所述，父組件源碼經(jīng)收拾之后就是下面這樣：

<script setup lang="ts">
import { ref, onMounted, Ref } from 'vue';
// 組件接受的屬性
const props = defineProps({
  // 是否自動播放
  autoplay:{ type:Boolean, default: true },
  // 播放速度 1-10，越大越快，為防止填錯，將處理之后的結果用來播放速度
  speed:{ type:Number, default:1 },
  // 行為 true(鼠標放上去暫停,移出滾動) false(鼠標放上去滾動,移出暫停,必須設置autoplay為false)
  behave:{ type:Boolean, default: true }
});
// 定時器
const timer:Ref<null|NodeJS.Timer> = ref(null);
// 真正的播放速度
const realSpeed = ref(1);
// 開始滾動
const beginScroll = () => {
  // 滾動容器
  const vueScrollWrapDom: HTMLElement | null = document.querySelector(".vue-scroll-wrap");
  // 滾動容器的寬(所有子元素的寬之和)
  const overWidth = Array.from(document.querySelectorAll(".vue-scroll-wrap .vue-scroll-slide"))
    .map(e => e.clientWidth).reduce((a,b) => a + b);
  // 定義定時器開始滾動
  if(vueScrollWrapDom){
    timer.value = setInterval(() => {
      // 獲取滾之前的滾動距離
      const translateXs = vueScrollWrapDom.style.transform.match(/translateX\((.*)px\)/);
      let oldTranslateX = translateXs ? Number(translateXs[1]) : 0;
      // 如果滾動距離大于等于總距離的1/2，也就說明滾完了第一組(總共有兩組來做無縫銜接)，當?shù)诙M開始的時候讓滾動距離置為0，從頭開始
      if(Math.abs(oldTranslateX) >= (overWidth / 2)) oldTranslateX = 0;
      // 設置滾動距離
      vueScrollWrapDom.style.transform = `translateX(${oldTranslateX - realSpeed.value}px)`;
    },30)
  }
}
// 停止?jié)L動
const stopScroll = () => {
  if(timer.value) clearInterval(timer.value);
}
// 處理播放速度(為防止參數(shù)輸錯做處理)
const handleSpeed = (sped:number) => {
  if(sped < 1) return 1;
  if(sped > 10) return 10;
  return sped;
}
// 鼠標移入
const onMouseEn = () => {
  props.behave ? stopScroll() : beginScroll();
}
// 鼠標移出
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>

子組件的實現(xiàn)

父組件實現(xiàn)之后，子組件就很容易了。子組件只需要提供一個插槽可以放內容就夠了。

子組件源碼如下：

<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>

使用方法

父子組件都實現(xiàn)完成之后，接下來我們看一下怎么使用。

<script setup lang="ts">
// 1.首先引入兩個組件
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>

結語

好了，本次的分享就到此為止了。非常感謝你很有耐心的看完了，希望我這個小玩意能讓你有所收獲

更多關于vue無縫滾動的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

vue自定義一個v-model的實現(xiàn)代碼
這篇文章主要介紹了vue自定義一個v-model的實現(xiàn)代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-06-06
帶你理解vue中的v-bind
如果你寫過vue，對v-bind這個指令一定不陌生。下面小編將從源碼層面去帶大家剖析一下v-bind背后的原理,需要的小伙伴可以參考下面章的具體內容
2021-09-09
Vue?router?路由守衛(wèi)詳解
這篇文章主要為大家介紹了Vue?router?路由守衛(wèi)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
Vue響應式原理深入解析及注意事項
Vue 最顯著的一個功能是響應系統(tǒng) —— 模型只是普通對象，修改它則更新視圖。下面這篇文章主要給大家深入講解了關于Vue的響應式原理，以及Vue響應式的一些注意事項，需要的朋友下面隨著小編來一起學習學習吧。
2017-12-12
Vite圖片資源打包優(yōu)化的實現(xiàn)
本文主要介紹了Vite圖片資源打包優(yōu)化的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-04-04
vue 公共列表選擇組件,引用Vant-UI的樣式方式
這篇文章主要介紹了vue 公共列表選擇組件,引用Vant-UI的樣式方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue cli中env的使用指南
眾所周知，一個項目在開發(fā)、測試與生產(chǎn)環(huán)境的各種配置變量是不一樣的，但在vue cli 3中通過指令vue create xxx創(chuàng)建的項目取消了默認的 config 和 build 文件夾，這導致剛入手的小伙伴不知道在哪兒配置環(huán)境變量，不過官方也提供了相應的配置方法，本文就來介紹一下
2021-08-08
vue 系列——vue2-webpack2框架搭建踩坑之路
本文從零搭建vue項目，給大家分享了我的vue2-webpack2框架搭建踩坑之路,需要的朋友可以參考下
2017-12-12
Vue一個案例引發(fā)的遞歸組件的使用詳解
這篇文章主要介紹了Vue一個案例引發(fā)的遞歸組件的使用，本文主要給大家展示如何在項目中使用遞歸組件，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-11-11
詳解Vue中l(wèi)ocalstorage和sessionstorage的使用
這篇文章主要介紹了詳解Vue中l(wèi)ocalstorage和sessionstorage的使用方法和經(jīng)驗心得，有需要的朋友跟著小編參考學習下吧。
2017-12-12