<强> 1,微信小程序——弹幕的实现(无后台)
小程序刚刚出来,现在网上的演示是多,但是要找到一个自己需要的却不容易。今天跟大家分享自己写的一个弹幕功能。
效果图:
,我的思路是这样的,先用& lt; switch>标签确定是否打开弹幕,若打开弹幕则出现弹幕文本框和发射按钮,还有弹幕遮罩层。
先贴wxml和wxs代码。
, wxml代码如下:
& lt; !——页/索引/索引。wxml——比;
& lt;偷窃者indicator-dots=" {{indicatorDots}}”
播放="{{播放}}"间隔时间="{{间隔}}"="{{时间}}”在
& lt;块wx:=" {{imgUrls}}”天气:关键=岸捞亍北?
& lt; swiper-item>
& lt;图像src=" https://www.yisu.com/zixun/{{项}}”类="幻灯片图像"/比;
& lt;/swiper-item>
& lt;/block>
& lt;/swiper>
& lt; !——弹幕开关——比;
& lt;视图类=癰arrage-Switch”比;
& lt;开关id=" switch_ " bindchange=" barrageSwitch "/比;
& lt; text>弹幕& lt;/text>
& lt;/view>
& lt; !——弹幕输入框——比;
& lt;视图类=癰arrage-inputText”比;
& lt;视图类=癰arrage-input”比;
& lt;输入bindblur=" bind_shoot " value=" https://www.yisu.com/zixun/{{bind_shootValue}} "/比;
& lt;/view>
& lt;视图类=癰arrage-shoot”比;
大小& lt;按钮类=翱埂?懊阅恪眀indtap=翱埂钡脑诜⑸? lt;/button>
& lt;/view>
& lt;/view>
& lt; !——弹幕上单文字——比;
& lt;视图类=癰arrage-fly”比;
& lt;块wx:=" {{barrage_style}}”天气:关键=岸捞亍北?
& lt;文本类=" barrage-textFly "在{{item.barrage_shootText}} & lt;/text>
& lt;/block>
& lt;/view>
之前
wxs代码如下:
/*页/索引/索引。wxs */.slide-image {
宽度:100%;
}/*弹幕选择按钮的操作*/.barrage-Switch {
位置:绝对的;
底部:10 px;
右:10 px;
z - index: 2;
}/*弹幕输入框的操作*/.barrage-inputText {
位置:绝对的;
显示:flex;
background - color: # BFBFBF;
宽度:100%;
高度:40像素;
flex-direction:行;
nav-index: 2;
justify-content:中心;
对齐项目:中心;
底部:10%;
}
.barrage-input {
background - color: greenyellow;
宽度:60%;
高度:30 px;
}
.barrage-shoot {
margin-left: 10 px;
宽度:25%;
高度:30 px;
}
.shoot {
宽度:100%;
颜色:黑色;
}/*弹幕飞飞飞*/.barrage-fly {
z - index: 3;
高度:80%;
宽度:100%;
位置:绝对的;
上图:0;
}
.barrage-textFly {
位置:绝对的;
}
之前
这样基本的样式就都实现了。接下来要对弹幕上的字进行处理。
文字是从右往左移动,文字出现的位置上是随机,左边则是取屏幕的宽度。移动的时候是用定时器进行处理。
还有就是字体的颜色是随机出现的。这些功能都是利用js处理的。
<强> js的代码如下:
var barrage_style_arr=[];
var barrage_style_obj={};
var phoneWidth=0;
var计时器=[];
var定时器;
页面({
数据:{
imgUrls:(
“http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg”,
“http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg”,
“http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg”
),
indicatorDots:没错,
播放:没错,
区间:3000年,
持续时间:500
barrageTextColor:“# D3D3D3”,
barrage_inputText:“没有”,
barrage_shoottextColor:“黑人”,
bind_shootValue:“”,
barrage_style: [],
barragefly_display:“没有”,
},//生命周期函数——监听页面加载>
barrageSwitch:函数(e) {
console.log (e);
}
之前
wxml:
& lt;开关id=" switch_ " bindchange=" barrageSwitch "/比;
之前
结果:返回了一个objec。在控制台返回的类型好像都是json格式的数据。
{对象类型:“改变”,时间戳:2766,目标:对象,currentTarget:对象,细节:对象}
