vue 文字上下循环滚动_vue文字无缝向上滚动带控制停顿时间

• {{ item.title }}

export default {

data() {

return {

scrollData: [

{ id: 1, title: '架不住公司高层喜欢这种玩意儿' },

{ id: 2, title: '用在vue项目中的需求跟原生js的实现' },

{ id: 3, title: '文字间歇无缝向上滚动' },

{ id: 4, title: '即使你有一百个不乐意，谁让是人家给' },

{ id: 5, title: '今天就单拎出来一种实现方法' }

],

scrollArea: '',

speed: 25,//设置播放速度

timer: null,

delay: 0,//设置停顿时间

liHeight: ''

};

},

mounted() {

this.

refs.scroll;

let li = this.scrollArea.getElementsByTagName('li');

this.liHeight = li[0].offsetHeight;

this.scrollArea.scrollTop = 0;

this.scrollArea.innerHTML += this.scrollArea.innerHTML;

this.scrollData.length > 1 && setTimeout(this.startScroll, this.delay);

});

},

methods: {

startScroll() {

this.timer = setInterval(this.scrollUp, this.speed);

this.scrollArea.scrollTop++;

},

scrollUp() {

if (this.scrollArea.scrollTop % this.liHeight == 0) {

clearInterval(this.timer);

setTimeout(this.startScroll, this.delay);

} else {

this.scrollArea.scrollTop++;

if (this.scrollArea.scrollTop >= this.scrollArea.scrollHeight / 2) {

this.scrollArea.scrollTop = 0;

}

}

}

}

};

.scroll-up {

height: 100px;

line-height: 100px;

overflow: hidden;

}