vue 列表内容自动向上滚动_【功能记录】Vue列表向上滚动无缝连接

最近给朋友帮忙的时候遇到一个列表向上滚动无缝连接功能的需求，整理了下思路，把这个功能草草的做出来了，尚未做优化完善，先记录一下吧~

Html代码

• {{item.accountName}}

• {{item.accountName}}

Data数据

x: 0, //list1容器的translateY值

y: 0, //list2容器的translateY值

winnerList: [ //滚动数据

{

accountName: "1",

id: "0",

profit: "58354",

}

.......

]

js逻辑

mounted: function () {

this.scroll(); //执行滚动函数

},

watch: {},

methods: {

scroll() {

let ofHeight = this.$refs.edic.offsetHeight; //获取容器offsetHeight

let interVal = setInterval(() => { //设定定时器

this.x -= 2; //每次执行-2

console.log(this.x); //容器1上滚

if (this.x <= -ofHeight) { //当上滚像素大于等于容器offsetHeight

clearInterval(interVal); //停止定时器

interVal = setInterval(() => { //重新定义定时器

this.x -= 2; //容器1继续上滚

console.log(this.x);

this.y -= 2; //容器2衔接上滚

if (this.x <= -(2 * ofHeight)) { //当容器1上滚像素为2倍的offsetHeight时

this.x = 0; //translateY的值设定回0

}

if (this.y <= -(2 * ofHeight)) { //当容器2上滚像素为2倍的offsetHeight时

this.y = 0; //translateY的值设定回0

}

}, 50); //50毫秒执行一次

}

}, 50); //50毫秒执行一次

},

},

};

CSS样式

* {

margin: 0;

padding: 0;

}

ul,

li {

list-style: none;

box-sizing: border-box;

}

.light {

position: fixed;

right: 200px;

top: 200px;

width: 200px;

height: 600px;

border: 1px solid #ccc;

box-sizing: border-box;

overflow: hidden;

ul {

width: 100%;

height: 100%;

box-sizing: border-box;

li {

height: 40px;

width: 100%;

border-bottom: 1px solid #ccc;

display: flex;

justify-content: center;

align-items: center;

}

}

}