教你如何快速在 vue3 中实现列表的无缝滚动

最近要做一个列表的无缝滚动展示的功能，一开始使用了vue插件 vue-seamless-scroll，经过多次尝试后，果断放弃；这个插件在vue2中可以实现，但在vue3中不适用，各种错。于是，就用js自己写一个滚动方法，效果如图，完全实现了功能!

1.首先是页面

<template>
    <div>
        <div @mousemove="testMove" @mouseleave="testMend" >
            <div ref="roll" style="height: 110px;overflow: hidden;margin:20px;">
                <div v-for="item in listData" :key="item.id">
                    <span>{{item.name}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

2.vue3中写的js部分

<script setup>
    import {ref,reactive,onBeforeUnmount,onUnmounted,onMounted,nextTick} from 'vue'
	//定时器初始化
    let timer = ref(null)
    //ref绑定初始化
    let roll = ref(null)
    //列表数据初始化
    const listData = reactive([
        {name:'我是dom第一个'},
        {name:'我是dom第二个'},
        {name:'我是dom第三个'},
        {name:'我是dom第四个'},
        {name:'我是dom第五个'},
        {name:'我是dom第六个'},
        {name:'我是dom第七个'},
        {name:'我是dom第八个'},
        {name:'我是dom第九个'},
        {name:'我是dom第十个'},
    ])

    //等同于vue2中的beforeDestroy
    onBeforeUnmount(()=>{
        //清除定时器
        clearTimeout(timer.value)
    })
    //等同于vue2中的destroyed
    onUnmounted(()=>{
        //清除定时器
        clearTimeout(timer.value)
    })
    
    /**
     * @Description: 鼠标移动事件
     * @Author: admin
     */    
    function testMove(){
        clearTimeout(timer.value)
    }
    /**
     * @Description: 鼠标离开事件
     * @Author: admin
     */    
    function testMend(){
        start()
    }
	//开启定时器方法
    function start(){
        //清除定时器
      clearTimeout(timer.value)
      //定时器触发周期
      let speed = ref(75)
      timer.value = setInterval(MarqueeTest, speed.value)
    }
    function MarqueeTest() {
      let test1 = roll.value
      //判断组件是否渲染完成
      if (test1.offsetHeight == 0) {
        test1 = roll.value
      } else {
        //如果列表数量过少不进行滚动
        if(test1.childNodes.length<6){
            clearTimeout(timer.value)
            return;
          }
        //组件进行滚动
        test1.scrollTop += 1
        //判断滚动条是否滚动到底部
        if (test1.scrollTop == (test1.scrollHeight - test1.clientHeight)) {
          //获取组件第一个节点
          let a = test1.childNodes[0]
          //删除节点
          test1.removeChild(a)
          //将该节点拼接到组件最后
          test1.append(a)
        }
      }
    }
    //vue2中在created中调用
    //vue3中 setup 包含beforeCreate和created
    //启动定时器
    start()

    //注
    //示例中 listData 写的静态数据 可以直接调用start()
    //如果是接口获取 listData 列表时 需在 nextTick 中调用 start()；否则，
    //进入页面不会滚动 必须鼠标移入移出才会滚动
    //用nextTick 的原因是 需要等dom元素加载完毕后 再执行方法

    nextTick(()=>{
        start()
    })
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持，谢谢。

最后

以上就是健康导师为你收集整理的教你如何快速在 vue3 中实现列表的无缝滚动的全部内容，希望文章能够帮你解决教你如何快速在 vue3 中实现列表的无缝滚动所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。