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

先上图

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

弹幕区的页面:

   <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;
  },

总结

以上所述是小编给大家介绍的mpvue微信小程序开发之实现一个弹幕评论,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

(0)

相关推荐

  • 在小程序/mpvue中使用flyio发起网络请求的方法

    Fly.js 一个基于Promise的.强大的.支持多种JavaScript运行时的http请求库. 有了它,您可以使用一份http请求代码在浏览器.微信小程序.Weex.Node.React Native.快应用中都能正常运行.同时可以方便配合主流前端框架 ,最大可能的实现 Write Once Run Everywhere. Flyio Github: https://github.com/wendux/fly 问题 随着 Weex .mpvue 的发布,他们都是支持Vue.js语法.目前v

  • mpvue将vue项目转换为小程序

    一. mpvue简介 mpvue:是由 美团点评团队出品的小程序开 发的一款基于 vue的框架, 从整个 Vue的核心代码上经过二次开发而形成的一个框架,相当于是给Vue本身赋能,增加了开发微信小程序的能力. 使用 mpvue开发小程序,你将在小程序技术体系的基础上获取到这样一些能力: l 彻底的组件化开发能力:提高代码 l 完整的 Vue.js 开发体验 l 方便的 Vuex 数据管理方案:方便构建复杂应用 l 快捷的 webpack 构建机制:自定义构建策略.开发阶段 hotReload l

  • 微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤

    本文介绍了微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤,分享给大家,具体如下: 微信小程序框架:mpvue ui框架:mpvue-weui request请求:fly.js 1.项目初始化 注:如果没有安装node环境的请先去网上下载node.js下来安装,安装后默认安装npm了 接下到你要建项目的目录下打开cmd窗口(快捷方法:打开到目录后按住键盘shift,然后点击鼠标右键选择在此处打开powershell窗口即可) npm默认从外网下载包,可能会比较慢,可以换

  • 浅谈使用mpvue开发小程序需要注意和了解的知识点

    一.实例生命周期 除了Vue本身的生命周期处,mpvue还兼容了小程序的生命周期,这部分生命周期的钩子来源于微信小程序的Page,除特殊情况外,不建议使用小程序的生命周期钩子. app 部分: onLaunch,初始化 onShow,当小程序启动,或从后台进入前台显示 onHide,当小程序从前台进入后台 page 部分: onLoad,监听页面加载 onShow,监听页面显示 onReady,监听页面初次渲染完成 onHide,监听页面隐藏 onUnload,监听页面卸载 onPullDown

  • 基于mpvue的小程序项目搭建的步骤

    前言 mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为 H5,mpvue 将是十分契合的一种解决方案. Mpvue官网:http://mpvue.com/ demo地址 :https://github.com/ccwyn/mpvuedemo/tree/mast

  • 详解mpvue中小程序自定义导航组件开发指南

    这篇笔记主要记录一下基于mpvue的小程序中实现自定义导航的思路及应用.分享出来抛砖引玉,如有谬误或优化空间,欢迎交流. 小程序的配置项navigationStyle设置为custom之后,导航栏只保留右上角胶囊按钮,颜色.标题文字内容均可以自定义,可以此实现导航栏的个性化需求,实际应用如沉浸式视频播放页等. 小程序7.0.0之后的版本开始支持自定义单个页面的导航栏,将页面的navigationStyle设置为custom即可.mpvue的配置方式如下: 由于不同操作系统.不同机型的导航栏高度是

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

    先上图 就是一个简单的弹幕发送功能 弹幕区的页面: <div class="content" v-show="doommData.length"> <div class="textLeft"></div> <div class="textItem"> <p class="text aon" v-if="item.display" v-

  • 微信小程序开发打开另一个小程序的实现方法

    微信小程序打开另一个小程序,有两种方法:1.超链接:2.点击按钮. 全局配置: 跳转到其他小程序,需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下: App.json { ... "navigateToMiniProgramAppIdList": [ "wxe5f52902cf4de896" ] } 否则会弹出以下错误提示: 超链接实现跳转到小程序: demo.wxml <navigator target="miniProgram&quo

  • 微信小程序开发之实现一个跑步小程序

    目录 地图组件 当前位置 开始跑步按钮 GPS定位 设置前后台允许获取定位 开启前后台定位 绘制路线 自己动手实现一个跑步小程序 用到的方法:wx.onLocationChange,监听实时地理位置变化事件,需结合 wx.startLocationUpdateBackground,wx.startLocationUpdate使用. 地图组件 定义一个全屏的地图,地图配置项经纬度(longitude,latitude),缩放(scale),标记点(markers),路线(polyline)等 <v

  • 微信 小程序开发环境搭建详细介绍

    微信小程序可谓是今天最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会给移动端App带来一个寒冬,身为一个Android开发者我是不相信的,即使有,那也是很遥远的未来. 不管微信小程序是否能颠覆当今的开发格局,我们都要以好奇的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们一起来开始吧. 先放一张Github上demo的动态图 开发工具下载是看到GitHub上的分享.那么你可以直接

  • 微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换

    微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml <!--index.wxml--> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"

  • 微信小程序开发入门基础教程

    微信小程序开发入门基础教程 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果. 开发准备工作获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 下载开发工具 下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/dow

  • 微信小程序开发之入门实例教程篇

    前言 近日,在工作闲暇之余,阅读了一些关于微信小程序的文章,忍不住,想动手试他一试.本文就以"我的第一个微信小程序"为例,简单的介绍下,微信小程序的入门级用法. 一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可. 2.注册成功后进入首页,在 小程序发布流程->小程序开发与管理->配置服务器中,点击"开发者设置". 3.会获得一个AppID,记录AppID,后面创建项

  • 微信小程序开发之好友列表字母列表跳转对应位置

    微信小程序开发之好友列表字母列表跳转对应位置 前言: 在小程序里实现微信好友列表点击右侧字母列表跳转对应位置效果.写了个demo,核心部分很简单,所以没多少注释,如果遇到问题就加群问我吧. 核心技术点: 1.小程序scroll-view组件的scroll-into-view, scroll-with-animation. scroll-y属性. 2.小程序的touch事件的应用. 3.Js定时器的应用. view页面代码: index.wxml class="container" sc

  • 微信小程序开发实战教程之手势解锁

    代码:https://github.com/jsongo/wx-gesture-lock 这个手势解锁的demo使用了https://github.com/lvming6816077/H5lock这个项目的算法和主逻辑,整合到微信小程序来,修改了很多地方的语法来适配小程序,去掉了window.document等函数,同时也添加了新的机制来解耦界面的操作和第三方库,这个下面会介绍到. 不过可惜的是,这个demo也只能在开发工具上玩玩,到真机上测试的时候,手指一滑动,页面会跟着滚动,手势没法使用.

  • 微信小程序 开发指南详解

    编写代码 创建小程序实例 点击开发者工具左侧导航的"编辑",我们可以看到这个项目,已经初始化并包含了一些简单的代码文件.最关键也是必不可少的,是 app.js.app.json.app.wxss 这三个.其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件.微信小程序会读取这些文件,并生成小程序实例. 下面我们简单了解这三个文件的功能,方便修改以及从头开发自己的微信小程序. ​ app.js是小程序的脚本代码.我们可以在这个文件中监听并处理小程序的

随机推荐