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


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 相关文章推荐
Prototype使用指南之ajax
Jan 10 Javascript
Ext面向对象开发实践(续)
Nov 18 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 Javascript
angular2 ng build部署后base文件路径问题详细解答
Jul 15 Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 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
php邮件发送,php发送邮件的类
2011/03/24 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
laravel5.6实现数值转换
2019/10/23 PHP
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
微信小程序日历效果
2018/12/29 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
python函数局部变量用法实例分析
2015/08/04 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
HTML5的新特性(1)
2016/03/03 HTML / CSS
苹果中国官方网站:Apple中国
2016/07/22 全球购物
先进事迹材料怎么写
2014/12/30 职场文书
商标侵权律师函
2015/05/27 职场文书
学习十八大的感悟
2015/08/11 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP