微信小程序实现弹幕墙(祝福墙)


Posted in Javascript onNovember 18, 2020

本文实例为大家分享了微信小程序实现弹幕墙的具体代码,供大家参考,具体内容如下

为了解决左右弹幕重叠问题,也是找了网上挺多案例,最后都不行,最后利用四个数组和css3动画animation来解决
这是个祝福墙,用户发送弹幕到后台审核,审核通过显示在前端

微信小程序实现弹幕墙(祝福墙)

<!-- 弹幕墙 -->
<view class="barrage" wx:if="{{IsPush}}">
 <view class="barrage-a">
 <view class="barrage-b"><image src="../../images/img/a-13.png"></image></view>
 <view class="barrage-c">
 <view class="video_container">
 <view class='danmu'>
 <view class="danmu_wrapper">
 <view class="li0" wx:if="{{danmuFake0.cnt}}" style="width:{{danmuFake0.max}}rpx; animation: dmAnimation {{danmuFake0.max / 150}}s linear 1s infinite backwards;">
 <view wx:for="{{danmuFake0.cnt}}" wx:key="danmuFake0cntindex" data-idx="{{item.idx}}" data-width="{{item.width}}" class='danmu-li rowAndColCenter' style="left:{{item.left}}rpx">
 <text>{{item.title}}</text>
 </view>
 </view>
 <view class="li1" wx:if="{{danmuFake1.cnt}}" style="width:{{danmuFake1.max}}rpx; animation: dmAnimation {{danmuFake1.max / 150}}s linear 3s infinite backwards;">
 <view wx:for="{{danmuFake1.cnt}}" wx:key="danmuFake1cnt" data-idx="{{item.idx}}" data-width="{{item.width}}" class='danmu-li rowAndColCenter' style="left:{{item.left}}rpx">
 <text>{{item.title}}</text>
 </view>
 </view>
 <view class="li2" wx:if="{{danmuFake2.cnt}}" style="width:{{danmuFake2.max}}rpx; animation: dmAnimation {{danmuFake2.max / 150}}s linear 5s infinite backwards;">
 <view wx:for="{{danmuFake2.cnt}}" wx:key="danmuFake2cnt" data-idx="{{item.idx}}" data-width="{{item.width}}" class='danmu-li rowAndColCenter' style="left:{{item.left}}rpx">
 <text>{{item.title}}</text>
 </view>
 </view>
 <view class="li3" wx:if="{{danmuFake3.cnt}}" style="width:{{danmuFake3.max}}rpx; animation: dmAnimation {{danmuFake3.max / 150}}s linear 7s infinite backwards;">
 <view wx:for="{{danmuFake3.cnt}}" wx:key="danmuFake3cnt" data-idx="{{item.idx}}" data-width="{{item.width}}" class='danmu-li rowAndColCenter' style="left:{{item.left}}rpx">
 <text>{{item.title}}</text>
 </view>
 </view>

 </view>
 </view>
 </view>
 <form>
 <view class="danmuGrop">
 <input type="text" name="Name" bindinput="getInput" class="danmuinput" placeholder='请输入你的祝福语' placeholder-style="color:#b6b2a6;opacity:.55;"></input>
 <button style="width:108rpx;" class="sendDanmu" bindtap='sendDanmu' form-type='reset'>
 <image src="/images/img/a-3.png"></image>
 <text>发送</text>
 </button>
 </view>
 </form>
 </view>
 </view>
</view>

js:

var danmu0=[];
var danmu1=[];
var danmu2=[];
var danmu3=[];
 for (var i = 0; i < res.data.Entity.length; i++) {
 const num = Math.floor(Math.random() * 4);
 if(num == 0){
 var left = 0;
 if(danmu0.length){left = danmu0[danmu0.length-1].left + danmu0[danmu0.length-1].width + 80;}
 left = left < 0 ? 0 : left;
 danmu0.push({
 title: res.data.Entity[i].NewsContent,
 left: left,
 width:res.data.Entity[i].NewsContent.length*24,
 idx: num
 });
 }
 if(num == 1){
 var left = 0;
 if(danmu1.length){left = danmu1[danmu1.length-1].left + danmu1[danmu1.length-1].width + 80;}
 left = left < 0 ? 0 : left;
 danmu1.push({
 title: res.data.Entity[i].NewsContent,
 width:res.data.Entity[i].NewsContent.length*24,
 left: left,
 idx: num
 });
 }
 if(num == 2){
 var left = 0;
 if(danmu2.length){left = danmu2[danmu2.length-1].left + danmu2[danmu2.length-1].width + 80;}
 left = left < 0 ? 0 : left;
 danmu2.push({
 title: res.data.Entity[i].NewsContent,
 width:res.data.Entity[i].NewsContent.length*24,
 left: left,
 idx: num
 });
 }
 if(num == 3){
 var left = 0;
 if(danmu3.length){left = danmu3[danmu3.length-1].left + danmu3[danmu3.length-1].width + 80;}
 left = left < 0 ? 0 : left;
 danmu3.push({
 title: res.data.Entity[i].NewsContent,
 width:res.data.Entity[i].NewsContent.length*24,
 left: left,
 idx: num
 });
 }
 }
 that.setData({
 danmuFake0: {
 max : danmu0[danmu0.length-1].left + danmu0[danmu0.length-1].width + 80,
 cnt:danmu0
 },
 danmuFake1: {
 max : danmu1[danmu1.length-1].left + danmu1[danmu1.length-1].width + 80,
 cnt:danmu1
 },
 danmuFake2: {
 max : danmu2[danmu2.length-1].left + danmu2[danmu2.length-1].width + 80,
 cnt:danmu2
 },
 danmuFake3: {
 max : danmu3[danmu3.length-1].left + danmu3[danmu3.length-1].width + 80,
 cnt:danmu3
 }
 })

 var danmuMaxWid = Math.max(that.data.danmuFake0.max,that.data.danmuFake1.max,that.data.danmuFake2.max,that.data.danmuFake3.max);
 that.setData({
 danmuMaxWid:danmuMaxWid
})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
js实现textarea限制输入字数
Feb 13 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
JavaScript实现随机五位数验证码
Sep 27 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 #Vue.js
基于Cesium绘制抛物弧线
Nov 18 #Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 #Vue.js
js实现简易计算器小功能
Nov 18 #Javascript
微信小程序实现购物车功能
Nov 18 #Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 #Vue.js
微信小程序实现日历小功能
Nov 18 #Javascript
You might like
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
香妃
2021/03/03 冲泡冲煮
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
php后退一页表单内容保存实现方法
2012/06/17 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
详解vue 模版组件的三种用法
2017/07/21 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
vue操作dom元素的3种方法示例
2020/09/20 Javascript
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
python中__call__内置函数用法实例
2015/06/04 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
阿里云:Aliyun.com
2017/02/15 全球购物
HEMA英国:荷兰原创设计
2018/08/28 全球购物
给水工程专业毕业生自荐信
2014/01/28 职场文书
公司业务员岗位职责
2014/03/18 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
商场收银员岗位职责
2015/04/07 职场文书
行政上诉状范文
2015/05/23 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
导游词之河北白洋淀
2020/01/15 职场文书