微信小程序弹幕纯编码实现（非视频底）

效果图

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>


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

对你有帮助的话，请点个赞哦~

微信小程序弹幕纯编码实现（非视频底）相关推荐

微信小程序：纯头像微信小程序源码下载,多分类头像自动采集无需服务器和域名
这是一款纯头像的微信小程序除了头像没有其它功能头像有多种分类,功能简洁实用支持流量主模式收益另外该小程序无需服务器和域名该小程序安装方法如下: 解压域名以后然后使用微信开发者工具打开该小程序 ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
微信小程序video组件调用腾讯视频的解决方案
最近在开发中碰到了微信小程序video组件调用腾讯视频的问题,就趁机来总结一下. 对方只给了我一个腾讯视频的网页链接,然后需要放置到小程序里面,大概开发前景是这样的. 对方提供的视频链接: https ...
微信小程序：和平精英吃鸡捏脸数据助手微信小程序源码下载支持激励视频
这是一款捏脸数据的助手内包含了N款明星捏脸数据和各位大咖的数据这款小程序支持激励视频广告用户看广告然后复制数据到和平精英里面就可以给人物换脸了小程序里面也有教用户操作的教程安装方法: 使用微 ...
微信小程序：video标签默认显示视频的第一帧作为封面
微信小程序:video标签默认显示视频的第一帧作为封面 <video src="video_url"controls="{{false}}"initial ...
原生微信小程序跳转传参 : [非TabBar跳转传参] 和 [TabBar跳转传参]
一般常用的微信小程序跳转分为两种 1.非TabBar跳转 2.TabBar跳转 1.非TabBar跳转非TabBar页面的跳转通常使用wx.navigateTo来跳转页面,在链接后面加 ? 传参,如 ...
微信开发修改button里的字体大小_微信小程序全栈开发课程【视频版】2.2 index页面完善...
点击观看视频课程 ↓↓↓ 微信小程序首页完善https://www.zhihu.com/video/1195308096099282944 课程文字版 1.template 部分 (1)修改temp ...
微信小程序仿哔哩哔哩视频组件
微信小程序视频组件仿照哔哩哔哩微信小程序仿照哔哩哔哩(包含源码获取) 效果如下图一.项目介绍项目为简单的小程序代码片段,不包含后端,只通过原生的小程序语言开发,使用官方原生的 video,没有使 ...
active server pages 错误 asp 0126_微信小程序全栈开发课程【视频版】2.1 小程序前端页面初始配置、ESlint格式错误...
点击观看视频 ↓↓↓ 小程序前端页面初始配置.ESlinthttps://www.zhihu.com/video/1195030595196223488 课程文字版 1.修改src/pages文件夹 ...

微信小程序弹幕纯编码实现（非视频底）

效果图

微信小程序弹幕纯编码实现（非视频底）相关推荐

最新文章

热门文章