Vue实现简易多行滚动“弹幕“效果 - 行业资讯 - 肥雀云

看一下效果:
　　

　　& lt; template> 　　& lt; div类=癲emo-comment-container”比; 　　& lt; div 　　类=" scroll-container " 　　：　　比; 　　& lt; ul 　　类=" scroll-ul " 　　：　　比; 　　& lt; div 　　v代表="(项目、索引)列表” 　　:关键="指数” 　　v-bind=" baseStyle.style " 　　:背景=" baseStyle.style.bgColor__bg” 　　：　　:类=" [‘c-item-bg’,‘c-item’, !项。内容,,‘空’)” 　　比; 　　李& lt; 　　类=" c-item " 　　比; 　　& lt; div类=栋⒎泊铩吩? 　　& lt; img 　　v=" item.content " 　　类=" avatar-item " 　　:src=" https://www.yisu.com/zixun/item.photo " 　　比; 　　& lt;/div> 　　& lt; div 　　v=" item.content " 　　类=" c " 　　v-html=" item.content "/比; 　　& lt;/li> 　　& lt;/div> 　　& lt;/ul> 　　& lt;/div> 　　& lt; div类=捌缆厶跄俊北? 　　& lt; div类=癴”比; 　　& lt; div类=皌ext-c”比; 　　& lt;跨　　v="条目。类型===1” 　　类="文本" 　　v-text=" entry.text "/比; 　　& lt; div 　　v-else 　　类=" img-container " 　　比; 　　& lt; img src=" https://www.yisu.com/zixun/entry.image "比; 　　& lt;/div> 　　& lt;我　　v="数" 　　类="碳碳" 　　在{{数}}& lt;/i> 　　& lt;/div> 　　& lt; div> 　　& lt;跨类=" fake-input "祝辞来发表你的看法吧~ & lt;/span> 　　& lt;/div> 　　& lt;/div> 　　& lt;/div> 　　& lt;/div> 　　& lt;/template> 　　　　　　　　& lt; script> 　　出口默认{ 　　注入:[' rgba '), 　　道具:{ 　　urlConfig: { 　　类型:对象, 　　默认值:函数(){ 　　返回{} 　　} 　　}, 　　类型:{ 　　类型:字符串, 　　默认值:“热” 　　}, 　　页大小:{ 　　类型:数字, 　　默认值:50 　　}, 　　开放:{ 　　类型:布尔, 　　默认值:真正的　　}, 　　条目:{ 　　类型:对象, 　　默认值:函数(){ 　　返回{ 　　类型:1,//1文字2自定义　　文字:”, 　　形象:“ 　　} 　　} 　　}, 　　数量:{ 　　类型:数字, 　　默认值:2 　　}, 　　}, 　　数据(){ 　　返回{ 　　数:2334 　　dom:空, 　　高度:0,//单项高度　　y: 0,//每次移动距离　　列表:[],//接口列表　　originLength: 0,//原始数组长度　　过渡:缓解所有。4, 　　圆:0//需要滚动多少轮　　} 　　}, 　　创建(){ 　　this.getCommentList () 　　}, 　　安装(){ 　　这一点。dom=document.querySelector (“.c-item”)//计算可视区域高度　　这一点。身高=64 *。+(12 *(这个数量。数- 1)) 　　}, 　　方法:{ 　　getCommentList () {//接口数据　　const _list=[] 　　这一点。originLength=_list.length 　　const mod=riginLength % this.number 　　我们需要=riginLength & lt;这一点。数量& # 63;(这一点。数量- this.originLength):国防部祝辞0 & # 63;这一点。国防部:0//计算出要添加的空白元素个数　　这一点。=_list列表//设置空项　　const空=JSON.parse (JSON.stringify (_list [0])) 　　空的。内容="//补齐空白元素　　而(需要){ 　　this.list.push(空的) 　　需要—— 　　}//填充重复元素　　让重复=this.number 　　让指数=0 　　而(重复){ 　　this.list.push (_list(指数)) 　　指数+ + 　　重复—— 　　} 　　　　这一点。圆=this.list。长度/this.number 　　　　this.scroll () 　　}, 　　滚动(){ 　　允许数=1 　　setInterval()=比;{ 　　数+ + 　　这一点。y -=Ｉ砀? 12//移动可视区域高度+最后一个条目的margin-bottom 　　这一点。='过渡。4 s缓解所有的　　setTimeout(()=比;{ 　　如果(count===this.round) { 　　数=1 　　这一点。过渡=" 　　这一点。y=0 　　} 　　},800) 　　},2000) 　　} 　　} 　　} 　　& lt;/script> 　　　　

以上所述是小编给大家介绍的Vue实现简易多行滚动“弹幕”,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持。
　　如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!