微信小程序滚动字幕及微信小程序弹幕的实现技巧
今天小编给大家介绍一款新的微信小程序，就是微信小程序中滚动字幕和弹幕的实现技术。相信很多微信用户对这个功能还不是很了解，也不知道这个功能是做什么的，不妨跟随小编来看看。我希望能有所帮助。
微信小程序的滚动字幕已经成为微信小程序开发中最热门的话题。下面将从各个方面谈谈微信小程序滚动字幕和弹幕的实现技巧。
现在网上有很多demo，但是要找到你需要的并不容易。今天给大家分享一个我写的弹幕功能。点击这里开始微信小程序开发。
我们先看一下效果：
wxml代码如下：
自动播放='{{自动播放}}'间隔='{{间隔}}'
持续时间='{{持续时间}}'
弹幕
排放
{{item.barrage_shootText}}
wxss代码如下：
/* 页面/index/index.wxss */
.幻灯片图像{
宽度：100%；
}
/* 弹幕选择按钮的操作*/
.弹幕开关{
位置：绝对；
底部：10 像素；
右：10 像素；
z 索引：2；
}
/* 弹幕输入框的操作*/
.弹幕输入文本{
位置：绝对；
显示：柔性；
背景颜色：#BFBFBF；
宽度：100%；
高度：40px；
弯曲方向：行；
导航指数：2；
调整内容：居中；
对齐项居中；
底部：10%；
}
.弹幕输入{
背景颜色：绿黄色；
宽度：60%；
高度：30px；
}
.弹幕射击{
左边距：10px；
宽度：25%；
高度：30px；
}。射击{
宽度：100%；
颜色：黑色；
}
/*弹幕飞行*/
.弹幕飞{
z 索引：3；
身高：80%；
宽度：100%；
位置：绝对；
顶部：0；
}
.弹幕-textFly{
位置：绝对；
}
这样，基本的样式就实现了。接下来我们需要对弹幕上的文字进行处理。
文本从右向左移动，文本的顶部位置是随机的，左侧位置是屏幕的宽度。移动时，用定时器进行处理。
此外，字体颜色随机出现。这些功能都是使用js来处理的。点击这里开始微信小程序开发。
js代码如下：
varbarrier_style_arr=[];
varbarrier_style_obj={};
var 电话宽度=0;
var 计时器=[];
变量定时器；
页（{
数据： {
图片网址：[
'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'
],
指标点：true，
自动播放：正确，
间隔：3000，
持续时间：500，
弹幕文字颜色：'#D3D3D3',
Barrier_inputText:'无',
barrage_shoottextColor:'黑色',
bind_shootValue:'',
屏障样式：[]，
barragefly_display:'无',
},
//生命周期函数--监听页面加载
onLoad：函数（选项）{
var that=this;
//获取屏幕的宽度
wx.getSystemInfo({
成功：函数（res）{
that.setData({
barrage_phoneWidth:res.windowWidth-100,
})
}
})
电话宽度=that.data.barrage_phoneWidth;
控制台.log(phoneWidth);
},
//是否打开弹幕.
屏障开关：函数（e）{
控制台.log(e);
//首先判断是否没有打开
if(!e.detail.value){
//清除弹幕
barrage_style_arr=[];
//设置数据的值
this.setData({
弹幕文字颜色：'#D3D3D3',
Barrier_inputText:'无',
barragefly_display:'无',
弹幕风格：弹幕风格_arr，
});
//清除定时器
清除间隔（计时器）；
}别的{
this.setData({
弹幕文字颜色：'#04BE02',
barrage_inputText:'flex',
barragefly_display:'阻止',
});
//打开定时器
计时器=setInterval(this.barrageText_move,800)
}
},
//启动按钮
拍摄：功能（e）{
//随机字体颜色
var 文本颜色=
'rgb('+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+')';
////设置弹幕字体的水平位置样式
//var textWidth=-(this.data.bind_shootValue.length*0);
//设置弹幕字体的垂直位置样式
var barrageText_height=(Math.random())*266;
屏障样式_obj={
//文本宽度： 文本宽度，
barrageText_height:barrageText_height,
barrage_shootText:this.data.bind_shootValue,
barrage_shoottextColor 文字颜色，
barrage_phoneWidth:phoneWidth
};
barrage_style_arr.push(barrage_style_obj);
this.setData({
barrage_style:barrage_style_arr, //发送弹幕
bind_shootValue:'' //清空输入框
})
//定时器让弹幕移动
//this.timer=setInterval(this.barrageText_move,800);
},
//定时器让弹幕移动
barrageText_move函数(){
var timeNum=barrage_style_arr.length;
var 文本移动；
为（变量我=0;我
textMove=barrage_style_arr[i].barrage_phoneWidth;
console.log('barrage_style_arr['+i+'].barrage_phoneWidth----------:'+barrage_style_arr[i].barrage_phoneWidth);
文本移动=文本移动-20;
barrage_style_arr[i].barrage_phoneWidth=textMove;
//删除已经消失的
如果（文本移动=-100）{
//清除超时(this.timer);
barrage_style_arr.splice(0,1);
我- ;
//所有弹幕已经运行完毕
if(barrage_style_arr.length==0){
this.setData({
弹幕风格：弹幕风格_arr，
})
//clearInterval(this.timer);
返回；
}
}
console.log(''+i+'个计时器：',textMove);
this.setData({
弹幕风格：弹幕风格_arr，
})
}
},
//绑定启动输入框，将值传递给data中的bind_shootValue，启动时调用
绑定_拍摄：函数（e）{
this.setData({
bind_shootValue:e.detail.value
})
},
})
因为刚刚接触小程序，所以对一些语句的使用不太了解。所以我遇到了一些问题：
1.在js中获取wxml控制信息。
js:
屏障开关：函数（e）{
控制台.log(e);
}
wxml:
结果：返回一个对象。控制台返回的类型好像是json格式的数据。
对象{类型：“更改”，时间戳：2766，目标：对象，当前目标：
对象，详细信息：对象}
2、实现弹幕时，点击启动按钮即可获取输入框的信息。
这里，当输入框失去焦点时，我将数据复制到js中的数据类中，然后在点击启动时取数据类中的值。
3.最大的问题是如何让文本运行起来，因为小程序不支持jQuery，这让我这个js白痴有点无奈。
先说一下我的移动文字的想法：
首先定义一个打开弹幕时的定时器，关闭弹幕时关闭定时器。因为我用数组来存储文字移动样式，所以剩下的就确定了。我只需要更改左侧的大小即可使文本移动。所以我用一个for循环来改变定时器运行时的弹幕文字样式。
左：xxx px 的大小；点击这里开始微信小程序开发。
如果您觉得有用，请通过微信转发给您的微信好友。
以上精彩内容是小编为大家精心搜集的关于微信小程序中滚动字幕和弹幕的实现技巧的相关内容。微信小程序中滚动字幕和弹幕的实现技术比较简单。接下来小编将为大家收集更多微信小程序的精彩内容。
