看一下效果：
实现任意行数的定时翻滚效果，不使用重复标签的方式，而是根据展示个数判断是否缺省，并添加对应展示个数的重复项来实现。
vue 的演示代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | <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 实现简易多行滚动"弹幕"，希望对大家有所帮助
版权声明：本站所有图片/内容除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！
