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

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

先上图

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;

   },

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


目录
相关文章
|
14天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
208 7
|
13天前
|
人工智能 小程序
一步步开发AI运动小程序】二、引入插件
随着人工智能技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等AI运动APP广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。内容包括新建uni-app项目、配置插件、部署模型、安装依赖包、全局初始化和调用插件对象。
|
12天前
|
小程序 搜索推荐 数据挖掘
跳绳打卡小程序开发多钱费用
跳绳打卡小程序通过智能手机即可轻松使用,无需额外设备,只需一根跳绳即可开始您的健康之旅。它结合了便捷性、互动性和个性化设置,让跳绳这项运动变得更加有趣和高效
|
14天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
281 1
|
10天前
|
存储 传感器 小程序
跳绳计数小程序开发系统
首先,我们需要明确跳绳计数小程序的核心功能:为用户提供跳绳计数的便捷方式。这意味着小程序需要能够准确地记录用户的跳绳次数,并为用户提供清晰、直观的计数展示。
|
10天前
|
人工智能 编解码 小程序
【一步步开发AI运动小程序】四、小程序如何抽帧
随着AI技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等APP使云上运动会、线上健身等概念备受关注。本文将引导您从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”。文中详细介绍了微信小程序抽帧的相关API、设置及注意事项,帮助开发者更好地实现AI运动功能。下篇将介绍人体识别技术,敬请期待。
|
11天前
|
传感器 存储 小程序
跳绳计数小程序开发
跳绳计数小程序旨在通过智能设备(如手机或智能手表)记录用户在跳绳过程中的次数、时间、速度等关键数据,为用户提供便捷的运动记录和数据分析服务
|
9天前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
22 0
|
10天前
|
小程序 搜索推荐 前端开发
小剧场短剧影视小程序开发
小剧场短剧影视小程序旨在为用户提供一个便捷、互动的平台,让用户能够随时随地观看、分享和评论各类小剧场短剧。通过小程序,用户可以浏览热门短剧、搜索感兴趣的内容、参与社区互动,以及享受个性化的推荐服务。
|
11天前
|
小程序 搜索推荐 前端开发
短剧小程序开发案例
首先,明确你的短剧平台的目标用户群体和他们的需求。比如,年轻用户可能更倾向于轻松、幽默的短剧内容,而家庭用户则可能更偏爱教育、亲子类的短剧。了解用户需求有助于你设计更符合他们口味的功能和界面