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