}
},
created () {
this.getCommentList()
},
mounted () {
this.dom = document.querySelector('.c-item')
// 计算可视区域高度
this.height = 64 * this.number + (12 * (this.number - 1))
},
methods: {
getCommentList () {
// 接口数据
const _list = [] this.originLength = _list.length
const mod = this.originLength % this.number
let need = this.originLength < this.number ? (this.number - this.originLength) : mod > 0 ? this.number - mod : 0 // 计算出要添加的空白元素个数
this.list = _list
// set empty item
const empty = JSON.parse(JSON.stringify(_list[0]))
empty.content = ''
// 补齐空白元素
while (need) {
this.list.push(empty)
need--
}
// 填充重复元素
let repeat = this.number
let index = 0
while (repeat) {
this.list.push(_list[index])
index++
repeat--
}
this.round = this.list.length / this.number
this.scroll()
},
scroll () {
let count = 1
setInterval(() => {
count++
this.y -= this.height + 12 // 移动可视区域高度 + 最后一个 item 的 margin-bottom
this.transition = '.4s ease all'
setTimeout(() => {
if (count === this.round) {
count = 1
this.transition = ''
this.y = 0
}
}, 800)
}, 2000)
}
}
}
</script>
总结
以上所述是小编给大家介绍的Vue 实现简易多行滚动”弹幕”，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
