效果图
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%);
}
}
到此这篇关于微信小程序弹幕纯编码实现的文章就介绍到这了,更多相关微信小程序弹幕内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！