Vue 实现简易多行滚动"弹幕"效果

看一下效果： 实现任意行数的定时翻滚效果，不使用重复标签的方式，而是根据展示个

看一下效果：

 

实现任意行数的定时翻滚效果，不使用重复标签的方式，而是根据展示个数判断是否缺省，并添加对应展示个数的重复项来实现。

Vue 的演示代码如下：

<template>
 <div class="demo-comment-container">
 <div
 class="scroll-container"
 :style="{height: `${height/100}rem`}"
 >
 <ul
 class="scroll-ul"
 :style="{transform: `translate3d(0, ${y/100}rem, 0)`, transition: `${transition}`}"
 >
 <div
 v-for="(item, index) in list"
 :key="index"
 v-bind="baseStyle.style"
 :bgColor="baseStyle.style.bgColor__bg"
 :style="{ color: rgba(baseStyle.color__nf) }"
 :class="['c-item-bg', 'c-item', !item.content && 'empty']"
 >
 <li
 class="c-item"
 >
 <div class="avatar">
 <img
 v-if="item.content"
 class="avatar-item"
 :src="item.photo"
 >
 </div>
 <div
 v-if="item.content"
 class="c-content"
 v-html="item.content"
 />
 </li>
 </div>
 </ul>
 </div>
 <div class="comment-entry">
 <div class="f">
 <div class="text-c">
 <span
 v-if="entry.type === 1"
 class="text"
 v-text="entry.text"
 />
 <div
 v-else
 class="img-container"
 >
 <img :src="entry.image">
 </div>
 <i
 v-if="count"
 class="c-c"
 >{{ count }}</i>
 </div>
 <div>
 <span class="fake-input">来发表你的看法吧~</span>
 </div>
 </div>
 </div>
 </div>
</template>

<script>
export default {
 inject: ['rgba'],
 props: {
 urlConfig: {
 type: Object,
 default: function () {
 return {}
 }
 },
 type: {
 type: String,
 default: 'hot'
 },
 pageSize: {
 type: Number,
 default: 50
 },
 open: {
 type: Boolean,
 default: true
 },
 entry: {
 type: Object,
 default: function () {
 return {
 type: 1, // 1 文字 2 自定义
 text: '',
 image: ''
 }
 }
 },
 number: {
 type: Number,
 default: 2
 },
 },
 data () {
 return {
 count: 2334,
 dom: null,
 height: 0, // 单项高度
 y: 0, // 每次移动距离
 list: [], // 接口列表
 originLength: 0, // 原始数组长度
 transition: 'ease all .4s',
 round: 0 // 需要滚动多少轮
 }
 },
 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 实现简易多行滚动"弹幕"，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！ 如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

vue 滚动弹幕 vue 多行滚动弹幕