vue实现无缝滚动手摸手教程

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

这篇文章主要为大家介绍了vue实现无缝滚动手摸手教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

开发背景

之前在Vue2项目中使用vue-seamless-scroll组件实现过如下图的效果，最近要使用Vue3来实现，找了一天没有找到合适的组件，打算自己造个轮子，特次来分享下实现过程。

需求分析

通过使用类似下列代码的方式实现

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

实现自动滚动
实现无缝滚动
鼠标移入暂停，鼠标移出继续

实现思路

实现需求一

首先是需要两个组件，这里姑且把父组件称做Scroll组件，子组件称作ScrollSlide组件。父组件和子组件中均需要使用插槽，子组件的插槽内容即是一个slide的内容，具体内容由使用者提供。

实现需求二

通过使用定时器setInteval持续让元素向左偏移(translateX)。

实现需求三

通过在父组件中放置两个<slot />将使用者传过来的插槽复制两遍，正如上面的例子，传入了四个Slide，但其实父组件中渲染了八遍，称为两组，当向左偏移量 >= 所有子元素的宽度之和/2，说明滚动了一组，这时就可以把偏移量置为0，也就是让他从头开始滚动，但此时无缝衔接到第二组之后又从头开始，视觉上看不出任何变化，这是我们也可以清除掉(clearInterval)为实现需求二而创造的定时器(setInterval)。

实现需求四

前面都说了，使用 定时器(setInteval) 结合偏移(translateX) 实现滚动，那停止滚动，自然就执行clearInteval啦，那继续滚动也就继续开始执行setInteval了。

撸起袖子开始干

目录规划

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

scroll/index.vue 为父组件
scroll/scroll-slide.vue 为子组件

父组件的实现

这里用的是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语法糖来实现。

我们假设ul中有n个li，并让他们横向排列，.vue-scroll设置了overflow:hidden;，这时你就不难发现，我们让偏移的元素也就是ul，超出容器被隐藏。

接下来编写滚动函数

<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，也就说明滚完了第一组(总共有两组来做无缝衔接)，当第二组开始的时候让滚动距离置为0，从头开始
      if(Math.abs(oldTranslateX) >= (overWidth / 2)) oldTranslateX = 0;
      // 设置滚动距离
      vueScrollWrapDom.style.transform = `translateX(${oldTranslateX - 1}px)`;
    },30)
  }
}
</script>

上述代码注释已经写得非常详细了，这里就不做过多解释。接下来需要让这个滚动函数执行，所以引入onMounted钩子，并调用滚动方法。

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

这个时候父组件就已经实现了自动滚动，接下来要实现，鼠标移入停止滚动，鼠标移出继续滚动。

那首先就需要给div元素绑定鼠标移入移出事件，并在js里面编写对应方法。

<script setup lang="ts">
// ...
// 停止滚动方法
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>

这时我突发奇想，有些人就会反着来，鼠标移入开始滚动，鼠标移出停止滚动，如果要把组件面向大众使用，确实得考虑这个问题，所以定义个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方法中，不难发现，translateX(${oldTranslateX - n}px),n越大，滚动速度越快，这里就把n剔出去，叫做speed，由父组件传入。

综上所述，父组件源码经收拾之后就是下面这样：

<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，也就说明滚完了第一组(总共有两组来做无缝衔接)，当第二组开始的时候让滚动距离置为0，从头开始
      if(Math.abs(oldTranslateX) >= (overWidth / 2)) oldTranslateX = 0;
      // 设置滚动距离
      vueScrollWrapDom.style.transform = `translateX(${oldTranslateX - realSpeed.value}px)`;
    },30)
  }
}
// 停止滚动
const stopScroll = () => {
  if(timer.value) clearInterval(timer.value);
}
// 处理播放速度(为防止参数输错做处理)
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>

子组件的实现

父组件实现之后，子组件就很容易了。子组件只需要提供一个插槽可以放内容就够了。

子组件源码如下：

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

使用方法

父子组件都实现完成之后，接下来我们看一下怎么使用。

<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的实现代码
这篇文章主要介绍了vue自定义一个v-model的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-06-06
带你理解vue中的v-bind
如果你写过vue，对v-bind这个指令一定不陌生。下面小编将从源码层面去带大家剖析一下v-bind背后的原理,需要的小伙伴可以参考下面章的具体内容
2021-09-09
Vue router 路由守卫详解
这篇文章主要为大家介绍了Vue router 路由守卫，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
Vue响应式原理深入解析及注意事项
Vue 最显著的一个功能是响应系统 —— 模型只是普通对象，修改它则更新视图。下面这篇文章主要给大家深入讲解了关于Vue的响应式原理，以及Vue响应式的一些注意事项，需要的朋友下面随着小编来一起学习学习吧。
2017-12-12
Vite图片资源打包优化的实现
本文主要介绍了Vite图片资源打包优化的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
vue 公共列表选择组件,引用Vant-UI的样式方式
这篇文章主要介绍了vue 公共列表选择组件,引用Vant-UI的样式方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue cli中env的使用指南
众所周知，一个项目在开发、测试与生产环境的各种配置变量是不一样的，但在vue cli 3中通过指令vue create xxx创建的项目取消了默认的 config 和 build 文件夹，这导致刚入手的小伙伴不知道在哪儿配置环境变量，不过官方也提供了相应的配置方法，本文就来介绍一下
2021-08-08
vue 系列——vue2-webpack2框架搭建踩坑之路
本文从零搭建vue项目，给大家分享了我的vue2-webpack2框架搭建踩坑之路,需要的朋友可以参考下
2017-12-12
Vue一个案例引发的递归组件的使用详解
这篇文章主要介绍了Vue一个案例引发的递归组件的使用，本文主要给大家展示如何在项目中使用递归组件，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-11-11
详解Vue中localstorage和sessionstorage的使用
这篇文章主要介绍了详解Vue中localstorage和sessionstorage的使用方法和经验心得，有需要的朋友跟着小编参考学习下吧。
2017-12-12