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


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 相关文章推荐
基于jQuery的动态表格插件
Mar 28 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 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实现微信公众平台账号自定义菜单类
2014/12/02 PHP
php格式化json函数示例代码
2016/05/12 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
Js callBack 返回前一页的js方法
2008/11/30 Javascript
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
javascript 函数参数限制说明
2010/11/19 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
理解Python中函数的参数
2015/04/27 Python
Python生成密码库功能示例
2017/05/23 Python
django 信号调度机制详解
2019/07/19 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
奥巴马开学演讲稿
2014/05/15 职场文书
专科生就业求职信
2014/06/22 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
消防验收申请报告
2015/05/15 职场文书
钢琴师观后感
2015/06/12 职场文书