微信小程序 弹幕功能简单实例
1、微信小程序----弹幕的实现(无后台)小程序刚刚出来,现在网上的demo是多,但是要找到一个自己需要的却不容易。今天跟大家分享自己写的一个弹幕功能。 效果图: 我的思路是这样的,先用 先贴wxml和wxss代码。 wxml代码如下: <view class="barrage-Switch" style="color:{{barrageTextColor}};"> <view class="barrage-inputText" style="display:{{barrage_inputText}}"> <view class="barrage-fly" style="display:{{barragefly_display}}"> wxss代码如下: / 弹幕选择按钮的操作/
.barrage-Switch{ position: absolute; bottom: 10px; right: 10px; z-index: 2; } / 弹幕输入框的操作/ margin-left: 10px; /弹幕飞飞飞/ } 这样基本的样式就都实现了。接下来要对弹幕上的字进行处理。 文字是从右往左移动,文字出现的位置top是随机,left则是取屏幕的宽度。移动的时候是用定时器进行处理。 还有就是字体的颜色是随机出现的。这些功能都是利用js处理的。 js的代码如下://字体颜色随机
var textColor = "rgb("+parseInt(Math.random()256)+","+parseInt(Math.random()256)+","+parseInt(Math.random()256)+")"; // //设置弹幕字体的水平位置样式 // var textWidth = -(this.data.bind_shootValue.length0); //设置弹幕字体的垂直位置样式 var barrageText_height = (Math.random())*266; barrage_style_obj = { // textWidth:textWidth,barrageText_height:barrageText_height,barrage_shootText:this.data.bind_shootValue,barrage_shoottextColor : textColor,barrage_phoneWidth:phoneWidth }; barrage_style_arr.push(barrage_style_obj); this.setData({ barrage_style:barrage_style_arr,//发送弹幕 bind_shootValue:"" //清空输入框 }) //定时器 让弹幕动起来 },//定时器 让弹幕动起来 },//绑定发射输入框,将值传递给data里的bind_shootValue,发射的时候调用 因为刚刚接触小程序,所以对一些语句的使用都不是很了解。所以遇到了一些问题: 1、在js中获取wxml的控件的信息。 js: wxml: 结果:返回了一个objec.在控制台返回的类型好像都是json格式的数据。 2、在实现弹幕的时候,点击发射按钮,如何获取到输入框的信息。 在这,我是输入框失去焦点的时候,将数据复制给js中的data类,再点击发射的时候取data类中的值。 3、其中最大的问题是如何让文字跑起来,因为小程序不支持jQuery,让我这个js白痴有点无能为力。 在这说说自己让文字移动的思路: 首先,在打开弹幕的时候定义一个定时器,关闭的弹幕的时候把定时器给关掉。因为我是用数组来存储文字移动的样式,其他确定下来。我只要改变left的大小就可以让文字移动。所以我用for循环,当定时器运行的时候改变弹幕文字样式 left:xxx px;的大小。 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |