純編碼實(shí)現(xiàn)微信小程序彈幕效果(非視頻底)

第純編碼實(shí)現(xiàn)微信小程序彈幕效果(非視頻底)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"發(fā)送/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({

*頁面的初始數(shù)據(jù)

data:{

msgInputBottom:0,

inputVal:"",

showInput:false,

barrageLineCount:10,

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

barragePullMillis:0,

//最新的彈幕

barrageNewMsgs:[],

//已顯示的彈幕，無新彈幕時(shí)則循環(huán)

barrageSendedMsgs:[],

//彈幕顯示數(shù)據(jù)

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:""});

*生命周期函數(shù)--監(jiān)聽頁面加載

onLoad(options){

*生命周期函數(shù)--監(jiān)聽頁面初次渲染完成

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);

//動態(tài)顯示彈幕

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]];

//獲取最后發(fā)起的彈幕超過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});

//新的彈幕未發(fā)完，老彈幕不循環(huán)

if(barrageNewMsgs!=nullbarrageNewMsgs.length0)return;

//從barrageSendedMsgs取開頭1條進(jìn)行播放后刪除，由上文代碼再次放入實(shí)現(xiàn)循環(huán)

varbarrageSendedMsgs=that.data.barrageSendedMsgs;

if(barrageSendedMsgs.length==0)return;

varbarrageSendedMsg=barrageSendedMsgs[0];

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

varbarrageMsg=barrageMsgs[arrSort[j]];

//獲取最后發(fā)起的彈幕超過5s則跟在后面

if(nowTimeMillis-barrageMsg.showTimeMillis5000){

//顯示

barrageMsg.showTimeMillis=nowTimeMillis;

barrageSendedMsg.showTimeMillis=nowTimeMillis;

barrageMsg.msgInfos.push(barrageSendedMsg);

barrageMsgs[arrSort[j]]=barrageMsg;

//在已發(fā)彈幕中刪除此條彈幕

barrageSendedMsgs.splice(0,1);

that.setData({barrageSendedMsgs:barrageSendedMsgs,

barrageMsgs:barrageMsgs});

break;

},500,this);

*生命周期函數(shù)--監(jiān)聽頁面顯示

onShow(){

*生命周期函數(shù)--監(jiān)聽頁面隱藏

onHide(){

*生命周期函數(shù)--監(jiān)聽頁面卸載

onUnload(){

*頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作

onPullDownRefresh(){

*頁面上拉觸底事件的處理函數(shù)

onReachBottom(){

*用戶點(diǎn)擊右上角分享

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: