- 当前 Bug 的表现（可附上截图）
bug表现:
收到新的评论并更新数据后,评论框内的所有评论都会被影响,具体的影响表现为评论闪动,类似页面刷新的效果.
问题机型:
iphone 7 iphone 7 plus iphone8 plus iphone x iphone xs max(安卓暂未发现该问题)
是否必现:是
<live-player src="{{url}}" mode="live" background-mute="ture" autoplay id="live" binderror="error" bindstatechange="statechange" controls class="liveplayer" style="position: relative;" object-fit="fillCrop" bindstatechange="livestage"> <cover-image class="tops" src="http://xxx.png" style="width: 100%;height: 100rpx;position: absolute;top:0;left: 0"></cover-image> <cover-image class="bottoms" src="http:xxx.png" style="width: 100%;height: 400rpx;position: fixed;bottom: 0;left: 0"></cover-image> <cover-view class="headbar"> <cover-view class="" style="width: 64rpx;height: 64rpx;overflow: hidden;border-radius: 8rpx;display: inline-block;float: left;margin-right: 16rpx;"> <cover-image src="{{ava}}" class="innerimg" style="width: 64rpx;height: 64rpx;"></cover-image> </cover-view> <cover-view class="_wrap"> <cover-view class="_name">{{name}}</cover-view> <cover-view class="audience">{{audience}}观众</cover-view> </cover-view> </cover-view> <cover-view class="chatbox" scroll-top="{{scrollTop}}"> <cover-view class="chatcol" wx:for="{{chat}}" wx:if="{{chat[index].comments || chat[index].system_notice.type == 'message'}}"> <cover-view wx:if="{{chat[index].comments}}"> <cover-view class="chat"><cover-image src="{{chat[index].comments[0].user_atar}}" class="inner"></cover-image></cover-view> <cover-view class="chatname">{{chat[index].comments[0].user_name}} : </cover-view> <cover-view class="chatcontent">{{chat[index].comments[0].content}}</cover-view> </cover-view> <cover-view wx:elif="{{chat[index].system_notice.type == 'message'}}"> <cover-view class="chata"><cover-image src="{{chat[index].system_notice.user_atar}}" class="inner"></cover-image></cover-view> <cover-view class="chatname">{{chat[index].system_notice.content}} </cover-view> </cover-view> <cover-view wx:elif="{{chat[index].system_notice.type == 'newcome'}}"> <cover-view class="chata"><cover-image src="{{chat[index].system_notice.user_atar}}" class="inner"></cover-image></cover-view> <cover-view class="chatname">{{chat[index].system_notice.content}} </cover-view> </cover-view> </cover-view> </cover-view></live-player> |
- 预期表现
当收到新的评论时,不要闪动
- 复现路径
index页面进入后任意进入一个直播,
- 提供一个最简复现 Demo
有解决方法吗 我的也是这个问题
麻烦按照教程提供下代码片段：https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
socketConnection:function(){var_this =thisvararray = []wx.connectSocket({url:'xx',header:{'content-type':'application/json'},success:function(r){console.log(r,'connectSocket')}})wx.onSocketOpen(function(r){vardata = JSON.stringify({lid:_this.data.innershare_lid,uid:wx.getStorageSync('loginData').uid})wx.sendSocketMessage({data:data,success:function(r){console.log(r,'sendSocketMessage')}})})wx.onSocketError(function(err){console.log('err')console.log(err)})wx.onSocketMessage(function(data){vartemp = JSON.parse(data.data)if(temp.comments){array.push(temp)}if(temp.system_notice && (temp.system_notice.type =='message')){array.push(temp)}if(temp.system_notice && (temp.system_notice.type =='newcome')){array.push(temp)}_this.setData({chat:array})if(array.length >= 15){array.shift()}_this.setData({scrollTop:array.length * 50})})},这是更新评论的逻辑,大体上就是读取到长连接中有特定的字段时,我就会把这个字段中的内容push到数组中去,然后更新chat,chat数据更新引发样式中的评论更新
截图
如图所示,我说闪动就是 快速出现->快速消失->快速出现