mpvue微信小程序开发之实现一个弹幕评论
先上图
就是一个简单的弹幕发送功能
弹幕区的页面:
先上图
就是一个简单的弹幕发送功能
弹幕区的页面:
弹幕区的代码逻辑:
//弹幕参数 classDoomm{ constructor(result,top,time,color,id){ //内容,顶部距离,运行时间,颜色,id(参数可自定义增加) /** *result数据结构 *faceImage:"", *bgColor:"#57B2FF", *sendMessage:"66666", *sendTime:"2019-11-0615:10:15", *name:"eve" * */ this.result=result; this.top=top; this.time=time; this.color=color; this.display=true; this.id=id; } } //随机字体颜色 getRandomColor(){ letrgb=[]; for(leti=0;i<3;++i){ letcolor=Math.floor(Math.random()*256).toString(16); color=color.length==1?"0"+color:color; rgb.push(color); } return"#"+rgb.join(""); } //节流函数 functionthrottle(fn,wait){ varcanUse=true;//设置一个开关 returnfunction(item){ if(!canUse){ returnfalse; }//如果开关已经关掉了就不用往下了 canUse=false;//利用闭包刚进来的时候关闭开关 setTimeout(()=>{ fn(item); canUse=true;//执行完才打开开关 },wait); }; } //添加弹幕列表 asyncbarrageCyclic(){ awaitthis.Arr.forEach((ele,i)=>{ //往弹幕列表里面添加数据 this.doommList.push( newDoomm( ele, Math.ceil(Math.random()*70+10), Math.floor(Math.random()*20+10), getRandomColor(), i ) ); }); this.doommData=this.doommList; },
总结
以上所述是小编给大家介绍的mpvue微信小程序开发之实现一个弹幕评论,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。