温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue如何实现无缝滚动手摸手效果

发布时间:2023-03-06 17:14:01 来源:亿速云 阅读:106 作者:iii 栏目:开发技术

这篇文章主要讲解了“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.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如何实现无缝滚动手摸手效果这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    vue
    AI