微信小程序弹幕

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

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() {
	}
})

.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%);
  }
}