css文字上下滚动代码怎么写,vue实现文字上下滚动(示例代码)

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

相关的dom内容

相关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内容

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()

},0);

}

},

destroyed(){

clearInterval( this.p );

}

}