这篇文章主要讲解了“vue如何实现无缝滚动手摸手效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue如何实现无缝滚动手摸手效果”吧！
需求分析
通过使用类似下列代码的方式实现
<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.vuescroll/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如何实现无缝滚动手摸手效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
