效果图
wxml
<view class="index-view">
<image class='background-img' src="/images/background-img.png" mode="widthFix"></image>
<view hidden="{{!showInput}}" class='msg-input' style="bottom: {{msgInputBottom}}px;">
<input type="text" confirm-type="send" bindfocus="foucusInput" focus="{{showInput}}"
bindconfirm="sendMsg" bindblur="blurInput" adjust-position="{{false}}" value="{{inputVal}}"/>
<button size="mini" bindtap="sendMsg">发送</button>
</view>
<image hidden="{{showInput}}" class='click-img' src="/images/msg-click-btn.png" bindtap="clickSendMsg"></image>
</view>
<view class="barrage-view">
<view wx:for="{{barrageLineCount}}" wx:for-item="count"
wx:for-index="lineIndex" data-index="{{lineIndex}}"
wx:key="*this" class="barrage-line">
<view class='barrage-msg' wx:for="{{barrageMsgs[lineIndex].msgInfos}}"
wx:key="msg">
<image class='barrage-avatar' src='{{item.avatarUrl}}'></image>
<text class='barrage-text'>{{item.msg}}</text>
</view>
</view>
</view>js
const app = 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) {
const msg = this.data.inputVal;
if (msg == "") return;
const userInfo = app.getUserInfo();
wx.request({
url: app.globalData.baseUrl + '/barrageMsg/',
data: { memberId: userInfo.id, msg: msg},
method: 'PUT'
})
this.setData({ inputVal: "" });
},
onLoad(options) {
},
onReady() {
// 初始化barrageLineCount个弹幕行
let barrageMsgs = this.data.barrageMsgs;
const barrageLineCount = this.data.barrageLineCount;
const nowTimeMillis = new Date().getTime();
for(var i = 0; i < barrageLineCount; i++)
barrageMsgs.push({'showTimeMillis': new String(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 => {
const data = res.data.data;
if (data == null) return;
that.setData({ barrageNewMsgs: data.barrageMsgList,
barragePullMillis: data.lastPullMillis });
}
});
}, 2000, this);
// 动态显示弹幕
setInterval((that) => {
var arrSort = [];
const barrageLineCount = this.data.barrageLineCount;
for(var i = 0; i < barrageLineCount; i++) arrSort.push(i);
arrSort.sort(() => (0.5 - Math.random()));
var nowTimeMillis = new Date().getTime();
var barrageNewMsgs = that.data.barrageNewMsgs;
if (barrageNewMsgs != null && barrageNewMsgs.length > 0) {
// 有最新弹幕
var barrageMsgs = that.data.barrageMsgs;
for(var j = 0; j < arrSort.length; j++) {
var barrageMsg = barrageMsgs[arrSort[j]];
// 获取最后发起的弹幕超过5s则跟在后面
if (nowTimeMillis - barrageMsg.showTimeMillis > 5000) {
// 显示
barrageMsg.showTimeMillis = nowTimeMillis;
const barrageNewMsg = 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中
var barrageMsgs = that.data.barrageMsgs;
for(var i = 0; i < barrageMsgs.length; i++) {
var barrageMsg = barrageMsgs[i];
var msgInfos = barrageMsg.msgInfos;
if (msgInfos == null || msgInfos.length == 0 ||
nowTimeMillis - msgInfos[0].showTimeMillis <= 10000) continue;
var barrageSendedMsgs = that.data.barrageSendedMsgs;
for (var j = 0; j < msgInfos.length; j++) {
var msgInfo = 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 != null && barrageNewMsgs.length > 0) return;
// 从barrageSendedMsgs取开头1条进行播放后删除，由上文代码再次放入实现循环
var barrageSendedMsgs = that.data.barrageSendedMsgs;
if (barrageSendedMsgs.length == 0) return;
var barrageSendedMsg = barrageSendedMsgs[0];
for(var j = 0; j < arrSort.length; j++) {
var barrageMsg = barrageMsgs[arrSort[j]];
// 获取最后发起的弹幕超过5s则跟在后面
if (nowTimeMillis - barrageMsg.showTimeMillis > 5000) {
// 显示
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() {
}
})css
.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-input input{ margin: 20rpx 1% 10rpx 1%; width: 75%; height: 60rpx;
border: none; padding: 5rpx 10px 5rpx 10px; border-radius: 8px;
background-color: #ffffff; display: inline-block; }
.msg-input button { width: 15%; display: inline-block; font-size: 30rpx; color: rgba(241, 213, 135, 0.911);
margin: 20rpx 0px 13rpx 0px; border-radius: 5px; background-color: rgb(247, 40, 40);}
.click-img { position: absolute; width: 40%; height: 20%; bottom: 18%; }
.barrage-view { position: absolute; top: 10rpx; margin-top: 30rpx; }
.barrage-line { height: 80rpx; }
.barrage-msg { position: fixed; left: 100%; width: 80%; animation: barrage-msg 10s linear 0s 1; }
.barrage-text { height: 45rpx; }
.barrage-avatar { width: 45rpx; height: 45rpx; border-radius: 20rpx; margin-right: 10rpx; }
@keyframes barrage-msg {
from {
left: 100%;
transform: translateX(0);
}
to {
left: 0;
transform: translateX(-100%);
}
}
到此这篇关于微信小程序弹幕纯编码实现的文章就介绍到这了,更多相关微信小程序弹幕内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
