1.列表效果:
数据定时刷新+无缝滚动+隔行变色+数据大于5条才执行滚动
2.注意
注意:报错(变量未定义)
原因:数据未加载好就去渲染页面了
方法:获取到数据之后再去渲染页面(执行滚动)
3.vue
<template>
<div id="com" v-if="listdata">
<ul :class="animate?'list':''">
<li
v-for="(item,index) in listdata"
:key="index"
:class="(index%2==0&&!changecolor||index%2!==0&&changecolor)?'bg_color':'bg_color2'"
>{{ item.content }}</li>
</ul>
</div>
</template>
<script>
export default {
name: "scroll3",
data() {
return {
listdata: [
// {content: 'css无缝滚动0'},
// {content: 'css无缝滚动1'},
// {content: 'css无缝滚动2'},
// {content: 'css无缝滚动3'},
// {content: 'css无缝滚动4'},
// {content: 'css无缝滚动5'},
// {content: 'css无缝滚动6'},
// {content: 'css无缝滚动7'},
// {content: 'css无缝滚动8'},
// {content: 'css无缝滚动9'},
],
animate: false, //控制动画
changecolor: false, //控制背景颜色
timer1: null,
timer2: null,
timer: null
};
},
created() {
this.getData();
},
mounted() {
clearInterval(this.timer);
//定时刷新数据
this.timer = setInterval(() => {
this.getData();
}, 60000);
},
destroyed() {
clearInterval(this.timer1);
clearInterval(this.timer2);
clearInterval(this.timer);
},
methods: {
scroll() {
clearInterval(this.timer2);
this.animate = true; //开启动画
this.timer2 = setTimeout(() => {
//延时--5ms仅执行一次
this.animate = false; //关闭动画
this.changecolor = !this.changecolor; //颜色隔行变色
this.listdata.push(this.listdata[0]);
this.listdata.shift();
}, 500);
},
getData() {
// 获取数据
this.listdata = [
{ content: "css无缝滚动0" },
{ content: "css无缝滚动1" },
{ content: "css无缝滚动2" },
{ content: "css无缝滚动3" },
{ content: "css无缝滚动4" },
{ content: "css无缝滚动5" },
{ content: "css无缝滚动6" },
{ content: "css无缝滚动7" },
{ content: "css无缝滚动8" },
{ content: "css无缝滚动9" }
];
clearInterval(this.timer1);
//定时--3S定时轮询(执行多次)
if (this.listdata.length > 5) {
//数据多于5条执行无缝滚动
this.timer1 = setInterval(this.scroll, 3000); //获取到数据之后再执行滚动效果,可以避免数据未加载好就去渲染页面,会报错(变量未定义)
}
}
}
};
</script>
<style lang="scss" scoped>
#com {
display: block;
width: 500px;
height: 300px;
overflow-y: auto;
margin: 0;
padding: 0;
.list {
margin-top: -45px;
transition: all 0.5s;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
li {
margin: 0;
padding: 0;
height: 40px;
line-height: 40px;
}
}
}
.bg_color {
background-color: #b3eed4 !important;
}
.bg_color2 {
background-color: #ffffff !important;
}
</style>