vue 文字上下循环滚动_vue实现文字上下滚动

实现文字的上下滚动使用positon的relative的top属性，通过动态改变top来实现相关内容的更换，通过transion来实现相关的动画效果，

相关的dom内容

• { {"第"+item+"条数据"}}

• { {"第"+list[0]+"条数据"}}

hello

相关css内容

img{ 30px;height: 30px;border-radius: 50%;vertical-align: middle;margin-right: 20px}

ul{position: relative;}

li{overflow: hidden;white-space: nowrap; text-overflow:ellipsis; 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内容

export default {

name: 'HelloWorld',

data() {

return {

list: [

"一","二","