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

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

先上图

image.gif编辑

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


弹幕区的页面:


     <div class="content" v-show="doommData.length">

       <div class="textLeft"></div>

       <div class="textItem">

         <p class="text aon" v-if="item.display" v-for="(item,index) in doommData" :key="index" :id="item.id" :style="{'animation-duration':item.time+'s', top:item.top+'%',color:'#333',background:item.result.bgColor}">

           <image :src="item.result.faceImage" class="headImg" />

           <span class="name">{{item.result.name}}:</span>

           <span class="text">{{item.result.sendMessage}}</span>

         </p>

       </div>

     </div>


弹幕区的代码逻辑:


// 弹幕参数

class Doomm {

 constructor(result, top, time, color, id) {

   //内容,顶部距离,运行时间,颜色,id(参数可自定义增加)

   /**

    * result数据结构

    * faceImage:"",

    * bgColor: "#57B2FF",

    * sendMessage: "66666",

    * sendTime: "2019-11-06 15:10:15",

    * name: "eve"

    *

    */

   this.result = result;

   this.top = top;

   this.time = time;

   this.color = color;

   this.display = true;

   this.id = id;

 }

}

//随机字体颜色

getRandomColor() {

 let rgb = [];

 for (let i = 0; i < 3; ++i) {

   let color = Math.floor(Math.random() * 256).toString(16);

   color = color.length == 1 ? "0" + color : color;

   rgb.push(color);

 }

 return "#" + rgb.join("");

}

//节流函数

function throttle(fn, wait) {

 var canUse = true; // 设置一个开关

 return function(item) {

   if (!canUse) {

     return false;

   } // 如果开关已经关掉了就不用往下了

   canUse = false; // 利用闭包刚进来的时候关闭开关

   setTimeout(() => {

     fn(item);

     canUse = true; // 执行完才打开开关

   }, wait);

 };

}

   //添加弹幕列表

   async barrageCyclic() {

     await this.Arr.forEach((ele, i) => {

       //往弹幕列表里面添加数据

       this.doommList.push(

         new Doomm(

           ele,

           Math.ceil(Math.random() * 70 + 10),

           Math.floor(Math.random() * 20 + 10),

           getRandomColor(),

           i

         )

       );

     });

     this.doommData = this.doommList;

   },

————————————————


目录
相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
14天前
|
小程序 Android开发
|
3天前
|
小程序 云计算 Android开发
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
17 3
|
9天前
|
小程序
|
10天前
|
小程序 数据安全/隐私保护
|
9天前
|
小程序
|
15天前
|
小程序
|
15天前
|
人工智能 小程序
【一步步开发AI运动小程序】五、帧图像人体识别
随着AI技术的发展,阿里体育等公司推出的AI运动APP,如“乐动力”和“天天跳绳”,使云上运动会、线上健身等概念广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。文章分为四部分:初始化人体识别功能、调用人体识别功能、人体识别结果处理以及识别结果旋转矫正。下篇将继续介绍人体骨骼图绘制。
|
16天前
|
人工智能 小程序 vr&ar
AI运动小程序开发常见问题集锦二
截至当前,我们的AI运动识别小程序插件已迭代至第23个版本,广泛应用于健身、体育、体测、AR互动等场景。本文针对近期用户咨询,汇总了常见问题,帮助用户减少开发成本,提高效率。主要涵盖计时与计数模式的区别、综合排行榜生成方法、全屏模式适配及无开发能力用户的解决方案。

热门文章

最新文章