如下图,又遇到了无缝循环滚动这个需求
突然想到我之前有分享过一篇关于这个的文章https://blog.csdn.net/chuenst/article/details/137125377,果断打开csdn准备cv
经过我一顿操作,很快实现了需求,但是这风扇直接嗡嗡转,直接感到不妙
算了看看网上有没有轮子
于是我找到了 vue3-seamless-scroll 立马开工
很快我就装上了这个轮子,虽然风扇不转了
但是数据多了的话循环一轮之后就卡一下,不是无缝衔接,找了好多也没找到解决办法
于是决定继续修自己的轮子,于是就有了以下代码
//html
<div class="scroll">
<div class="scrollContainer" ref="scrollContainer">
<div class="l-item" v-for="(item, index) in leftList" :key="index">
...
</div>
</div>
</div>
//css
.scroll {
height: 800px;
overflow: hidden;
}
//js
//封装方法
function toScroll(e: any) {
let sc = e.el;
if (sc && typeof sc === "object" && sc !== null) {
let contentHeight = sc.offsetHeight;
if (contentHeight < sc.parentElement.offsetHeight) return
let distance = 0
if (e.direction == 'down') distance = -contentHeight
sc.append(sc.cloneNode(sc))
let timer = null
if (timer) clearInterval(timer)
timer = setInterval(() => {
if (e.direction == 'up') {
if (distance * -1 < contentHeight) distance--
else distance = 0
sc.style.transform = 'translate(0px, ' + distance + 'px)';;
} else if (e.direction == 'down') {
if (distance < 0) distance++
else distance = -contentHeight
sc.style.transform = 'translate(0px, ' + distance + 'px)';
}
}, e.step || 3);
}
}
//调用
toScroll({
el: scrollContainer.value,
step: 3,
direction: 'up'
})