vue实现文字上下滚动
实现文字的上下滚动使用positon的relative的top属性,通过动态改变top来实现相关内容的更换,通过transion来实现相关的动画效果,
相关的dom内容
<template>
<div class="index">
<div class="scroll">
<ul :style="{top}" :class="{transition:index!=0}">
<li v-for="(item,index) in list">
{{"第"+item+"条数据"}}
</li>
<li>
{{"第"+list[0]+"条数据"}}
</li>
</ul>
</div>
<router-link to="/">hello</router-link>
</div>
</template>
相关css内容
img{width: 30px;height: 30px;border-radius: 50%;vertical-align: middle;margin-right: 20px}
ul{position: relative;}
li{overflow: hidden;white-space: nowrap; text-overflow:ellipsis;width: 80%;height: 60px;line-height: 60px;text-align: left;margin: 0;font-size: 14px}
.scroll{height:60px;overflow: hidden;font-size: 0px; position: relative;}
.transition{transition: top 0.5s}
相关script内容
<script>
export default {
name: 'HelloWorld',
data() {
return {
list: [
"一","二","三","四","五","六","七","八","九","十"
],
top: "",
index: 0,
p:""
}
},
mounted() {
this.goScroll()
},
methods: {
goScroll() {
var _this = this;
this.p = setInterval(() => {
console.log(22)
_this.top = -60 * _this.index + 'px';
if (_this.index >= this.list.length + 1) {
_this.index = 0;
_this.top = -0 + 'px';
clearInterval(_this.p);
_this.continueScroll()
} else {
_this.index++;
}
}, 1000)
},
continueScroll(){
var _this=this;
setTimeout(() => {
_this.index=1;
_this.top = -60 * this.index+ 'px';
_this.index++
this.goScroll()
},100);
}
},
destroyed(){
clearInterval( this.p );
}
}
</script>