小程序直播cover-view与cover-image闪动

微信公开课小程序热门讨论关于「小程序直播cover-view与cover-image闪动」的小程序开发问题
补充:小程序直播coverview与coverimage闪动
展开:当前Bug的表现bug表现:收到新的评论并更新数据后,评论框内的所有评论都会被影响,具体的影响表现为评论闪动,类似页面刷新的效果问题机型:iphone7iphone7plusiphone8plusiphonexiphonexsmax(安卓暂未发现该问题)是否必现:是<liveplayersrc={{url}}mode=livebackgroundmute=tureautoplayid=livebinderror=errorbindstatechange=statechangecontrolsclass=liveplayerstyle=position:relative;objectfit=fillCropbindstatechange=livestage<coverimageclass=topssrc=http:xxxpngstyle=width:100%;height:100rpx;position:absolute;top:0;left:0<coverimage<coverimageclass=bottomssrc=http:xxxpngstyle=width:100%;height:400rpx;position:fixed;bottom:0;left:0<coverimage<coverviewclass=headbar<coverviewclass=style=width:64rpx;height:64rpx;overflow:hidden;borderradius:8rpx;display:inlineblock;float:left;marginright:16rpx;<coverimagesrc={{ava}}class=innerimgstyle=width:64rpx;height:64rpx;<coverimage<coverview<coverviewclass=_wrap<coverviewclass=_name{{name}}<coverview<coverviewclass=audience{{audience}}观众<coverview<coverview<coverview<coverviewclass=chatboxscrolltop={{scrollTop}}<coverviewclass=chatcolwx:for={{chat}}wx:if={{chat[index]comments||chat[index]system_noticetype==message}}<coverviewwx:if={{chat[index]comments}}<coverviewclass=chat<coverimagesrc={{chat[index]comments[0]user_atar}}class=inner<coverimage<coverview<coverviewclass=chatname{{chat[index]comments[0]user_name}}:<coverview<coverviewclass=chatcontent{{chat[index]comments[0]content}}<coverview<coverview<coverviewwx:elif={{chat[index]system_noticetype==message}}<coverviewclass=chata<coverimagesrc={{chat[index]system_noticeuser_atar}}class=inner<coverimage<coverview<coverviewclass=chatname{{chat[index]system_noticecontent}}<coverview<coverview<coverviewwx:elif={{chat[index]system_noticetype==newcome}}<coverviewclass=chata<coverimagesrc={{chat[index]system_noticeuser_atar}}class=inner<coverimage<coverview<coverviewclass=chatname{{chat[index]system_noticecontent}}<coverview<coverview<coverview<coverview<liveplayer预期表现当收到新的评论时,不要闪动复现路径index页面进入后任意进入一个直播,提供一个最简复现Demo即速小程序：麻烦按照教程提供下代码片段：https:developersweixinqqcomminiprogramdevdevtoolsminicodehtml：socketConnection:function(){var_this=thisvararray=[]wxconnectSocket({url:xx,header:{contenttype:applicationjson},success:function(r){consolelog(r,connectSocket)}})wxonSocketOpen(function(r){vardata=JSONstringify({lid:_thisdatainnershare_lid,uid:wxgetStorageSync(loginData)uid})wxsendSocketMessage({data:data,success:function(r){consolelog(r,sendSocketMessage)}})})wxonSocketError(function(err){consolelog(err)consolelog(err)})wxonSocketMessage(function(data){vartemp=JSONparse(datadata)if(tempcomments){arraypush(temp)}if(tempsystem_notice&&(tempsystem_noticetype==message)){arraypush(temp)}if(tempsystem_notice&&(tempsystem_noticetype==newcome)){arraypush(temp)}_thissetData({chat:array})if(arraylength=15){arrayshift()}_thissetData({scrollTop:arraylength*50})})},这是更新评论的逻辑,大体上就是读取到长连接中有特定的字段时,我就会把这个字段中的内容push到数组中去,然后更新chat,chat数据更新引发样式中的评论更新截图如图所示,我说闪动就是快速出现快速消失快速出现
更多有关「小程序直播cover-view与cover-image闪动」的讨论可以前往微信公开课小程序参与互动哦！了解更多