vue非插件实现列表无限循环滚动

一、前言

最近刚好有个功能需要实现列表的无限循环滚动，在网上找到vue-seamless-scroll组件，使用起来很方便，也实现我需要的功能。我去查看了插件源码，实现原理还是比较有趣的，所以就参考了一下，自己手动实现个例子（有鼠标移入停止滚动，移出开始滚动功能）。

二、实现效果

三、功能分析

将一个 div 所有列表项包裹起来。用定时器控制 transform 来实现 div 自身的位移，代码中我是通过scrollTop参数开控制 y 方向的滚动，以此实现滚动的效果。关键在于将包裹列表的父元素设置 overflow: hidden; 属性。

<div class="scroll_list":style="{ transform: `translate(0px,-${scrollTop}px)` }"><div ref="scrollItemBox"><div class="scroll_item" v-for="(item, index) in listData":key="index">{{item.title}}</div></div><div v-html="copyHtml"></div></div>

动态控制 div 盒子的移动还是比较简单的，关键是无缝循环开始滚动，原理就是在所有列表项滚动完成后，将 div 的自身位移设置为0，也就是transform:

translate(0px,0px)

，此时的移动是一瞬间的，所以肉眼是看不出来的。我的代码逻辑就是先获取所有列表项的高度，判断scrollTop是否大于等于列表的高度，如果大于等于，就将 scrollTop 设置为0。

this.scrollTop++// 获取需要滚动的盒子的高度let scrollItemBox =this.$refs.scrollItemBox.offsetHeight
            // 当判断滚动的高度大于等于盒子高度时，从头开始滚动if(this.scrollTop >= scrollItemBox){this.scrollTop =0}

由于列表一直滚动到最后，会出现短暂的区域空白，然后再从头开始滚动。解决这种问题也很简单，那就是在列表后面放一个一模一样的列表。如下实现。

//在页面中<div v-html="copyHtml"></div>//获取列表的html并设置this.copyHtml =this.$refs.scrollItemBox.innerHTML

鼠标移入停止，移出开始滚动就比较简单了，控制定时器就可以了。

// 鼠标移入停止滚动mEnter(){clearInterval(timer);},// 鼠标移出继续滚动mLeave(){this.startScroll()},// 开始滚动startScroll(){
            timer =setInterval(this.scroll,this.speed);},

四、代码实现

<template><div class="InfiniteScroll"><div class="scroll_parent_box" @mouseenter="mEnter" @mouseleave="mLeave"><div class="scroll_list":style="{ transform: `translate(0px,-${scrollTop}px)` }"><div ref="scrollItemBox"><div class="scroll_item" v-for="(item, index) in listData":key="index">{{item.title}}</div></div><div v-html="copyHtml"></div></div></div></div></template><script>let timer =null;exportdefault{name:"InfiniteScroll",data(){return{scrollTop:0,//列表滚动高度speed:15,//滚动的速度listData:[{'title':'无缝滚动第一行',},{'title':'无缝滚动第二行',},{'title':'无缝滚动第三行',},{'title':'无缝滚动第四行',},{'title':'无缝滚动第五行',},{'title':'无缝滚动第六行',},{'title':'无缝滚动第七行',},{'title':'无缝滚动第八行',},{'title':'无缝滚动第九行',},{'title':'无缝滚动第十行',},{'title':'无缝滚动第十一行',}],//表示有多少个列表项copyHtml:'',//复制多一份防止滚动到后面出现空白};},mounted(){// 如果列表数据是异步获取的，记得初始化在获取数据后再调用this.initScroll()},methods:{initScroll(){this.$nextTick(()=>{this.copyHtml =this.$refs.scrollItemBox.innerHTML
                this.startScroll()})},// 鼠标移入停止滚动mEnter(){clearInterval(timer);},// 鼠标移出继续滚动mLeave(){this.startScroll()},// 开始滚动startScroll(){
            timer =setInterval(this.scroll,this.speed);},// 滚动处理方法scroll(){this.scrollTop++// 获取需要滚动的盒子的高度let scrollItemBox =this.$refs.scrollItemBox.offsetHeight
            // 当判断滚动的高度大于等于盒子高度时，从头开始滚动if(this.scrollTop >= scrollItemBox){this.scrollTop =0}}},};</script><style scoped>.InfiniteScroll {
    box-sizing: border-box;padding: 50px;}.scroll_parent_box {width: 300px;height: 400px;border: 1px solid #ebeef5;overflow: hidden;
    box-sizing: border-box;padding:0 10px;}.scroll_list {transition: all 0ms ease-in 0s
}.scroll_item {height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;}</style>