微客导航 » 文章资讯 » mpvue微信小程序开发之实现一个弹幕评论

mpvue微信小程序开发之实现一个弹幕评论

2023-08-08 09:15:03 489

先上图

就是一个简单的弹幕发送功能

弹幕区的页面：

{{item.result.name}}: {{item.result.sendMessage}}

弹幕区的代码逻辑：

//弹幕参数
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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

mpvue微信小程序开发之实现一个弹幕评论

热门推荐

随机推荐