纯编码实现微信小程序弹幕效果(非视频底)

第纯编码实现微信小程序弹幕效果(非视频底)view

imagesrc="/images/background-img.png"mode="widthFix"/image

viewhidden="{{!showInput}}"

inputtype="text"confirm-type="send"bindfocus="foucusInput"focus="{{showInput}}"

bindconfirm="sendMsg"bindblur="blurInput"adjust-position="{{false}}"value="{{inputVal}}"/

buttonsize="mini"bindtap="sendMsg"发送/button

/view

imagehidden="{{showInput}}"src="/images/msg-click-btn.png"bindtap="clickSendMsg"/image

/view

view

viewwx:for="{{barrageLineCount}}"wx:for-item="count"

wx:for-index="lineIndex"data-index="{{lineIndex}}"

wx:key="*this"

viewwx:for="{{barrageMsgs[lineIndex].msgInfos}}"

wx:key="msg"

imagesrc='{{item.avatarUrl}}'/image

text{{item.msg}}/text

/view

/view

/view

constapp=getApp();

Page({

*页面的初始数据

data:{

msgInputBottom:0,

inputVal:"",

showInput:false,

barrageLineCount:10,

//拉取最新弹幕的毫秒值

barragePullMillis:0,

//最新的弹幕

barrageNewMsgs:[],

//已显示的弹幕，无新弹幕时则循环

barrageSendedMsgs:[],

//弹幕显示数据

barrageMsgs:[]

foucusInput:function(e){

this.setData({msgInputBottom:e.detail.height})

blurInput:function(e){

this.setData({inputVal:e.detail.value,msgInputBottom:0,showInput:false})

clickSendMsg:function(e){

this.setData({showInput:true})

sendMsg:function(e){

constmsg=this.data.inputVal;

if(msg=="")return;

constuserInfo=app.getUserInfo();

wx.request({

url:app.globalData.baseUrl+'/barrageMsg/',

data:{memberId:userInfo.id,msg:msg},

method:'PUT'

this.setData({inputVal:""});

*生命周期函数--监听页面加载

onLoad(options){

*生命周期函数--监听页面初次渲染完成

onReady(){

//初始化barrageLineCount个弹幕行

letbarrageMsgs=this.data.barrageMsgs;

constbarrageLineCount=this.data.barrageLineCount;

constnowTimeMillis=newDate().getTime();

for(vari=0;ibarrageLineCount;i++)

barrageMsgs.push({'showTimeMillis':newString(nowTimeMillis-

Math.round(Math.random()*barrageLineCount)*1000),msgInfos:[]});

this.setData({barrageMsgs:barrageMsgs});

//每隔2s拉取最新的弹幕

setInterval((that)={

wx.request({

url:app.globalData.baseUrl+'/barrageMsg/',

data:{timeMillis:that.data.barragePullMillis},

method:'GET',

success:res={

constdata=res.data.data;

if(data==null)return;

that.setData({barrageNewMsgs:data.barrageMsgList,

barragePullMillis:data.lastPullMillis});

},2000,this);

//动态显示弹幕

setInterval((that)={

vararrSort=[];

constbarrageLineCount=this.data.barrageLineCount;

for(vari=0;ibarrageLineCount;i++)arrSort.push(i);

arrSort.sort(()=(0.5-Math.random()));

varnowTimeMillis=newDate().getTime();

varbarrageNewMsgs=that.data.barrageNewMsgs;

if(barrageNewMsgs!=nullbarrageNewMsgs.length0){

//有最新弹幕

varbarrageMsgs=that.data.barrageMsgs;

for(varj=0;jarrSort.length;j++){

varbarrageMsg=barrageMsgs[arrSort[j]];

//获取最后发起的弹幕超过5s则跟在后面

if(nowTimeMillis-barrageMsg.showTimeMillis5000){

//显示

barrageMsg.showTimeMillis=nowTimeMillis;

constbarrageNewMsg=barrageNewMsgs[0];

barrageNewMsg.showTimeMillis=nowTimeMillis;

barrageMsg.msgInfos.push(barrageNewMsg);

barrageMsgs[arrSort[j]]=barrageMsg;

//在最新弹幕中删除此条弹幕

barrageNewMsgs.splice(0,1);

that.setData({barrageNewMsgs:barrageNewMsgs,

barrageMsgs:barrageMsgs});

break;

//回收每个超过10s的弹幕放到barrageSendedMsgs中

varbarrageMsgs=that.data.barrageMsgs;

for(vari=0;ibarrageMsgs.length;i++){

varbarrageMsg=barrageMsgs[i];

varmsgInfos=barrageMsg.msgInfos;

if(msgInfos==null||msgInfos.length==0||

nowTimeMillis-msgInfos[0].showTimeMillis=10000)continue;

varbarrageSendedMsgs=that.data.barrageSendedMsgs;

for(varj=0;jmsgInfos.length;j++){

varmsgInfo=msgInfos[j];

if(nowTimeMillis-msgInfo.showTimeMillis=10000)break;

msgInfos.splice(j,1);j--;

barrageSendedMsgs.push(msgInfo);

barrageMsg.msgInfos=msgInfos;

barrageMsgs[i]=barrageMsg;

that.setData({barrageMsgs:barrageMsgs,

barrageSendedMsgs:barrageSendedMsgs});

//新的弹幕未发完，老弹幕不循环

if(barrageNewMsgs!=nullbarrageNewMsgs.length0)return;

//从barrageSendedMsgs取开头1条进行播放后删除，由上文代码再次放入实现循环

varbarrageSendedMsgs=that.data.barrageSendedMsgs;

if(barrageSendedMsgs.length==0)return;

varbarrageSendedMsg=barrageSendedMsgs[0];

for(varj=0;jarrSort.length;j++){

varbarrageMsg=barrageMsgs[arrSort[j]];

//获取最后发起的弹幕超过5s则跟在后面

if(nowTimeMillis-barrageMsg.showTimeMillis5000){

//显示

barrageMsg.showTimeMillis=nowTimeMillis;

barrageSendedMsg.showTimeMillis=nowTimeMillis;

barrageMsg.msgInfos.push(barrageSendedMsg);

barrageMsgs[arrSort[j]]=barrageMsg;

//在已发弹幕中删除此条弹幕

barrageSendedMsgs.splice(0,1);

that.setData({barrageSendedMsgs:barrageSendedMsgs,

barrageMsgs:barrageMsgs});

break;

},500,this);

*生命周期函数--监听页面显示

onShow(){

*生命周期函数--监听页面隐藏

onHide(){

*生命周期函数--监听页面卸载

onUnload(){

*页面相关事件处理函数--监听用户下拉动作

onPullDownRefresh(){

*页面上拉触底事件的处理函数

onReachBottom(){

*用户点击右上角分享

onShareAppMessage(){

})

.index-view{

display:flex;

width:100%;

align-content:center;

justify-content:center;

.background-img{width:100%;}

.msg-input{position:absolute;width:100%;bottom:0px;

background-color:rgba(241,213,135,0.911);}

.msg-inputinput{margin:20rpx1%10rpx1%;width:75%;height:60rpx;

border:none;padding:5rpx10px5rpx10px;border-radius:8px;

background-color:#ffffff;display:inline-block;}

.msg-inputbutton{width:15%;display:inline-block;font-size:30rpx;color: