[代码]socketConnection:[代码][代码]function[代码][代码](){[代码][代码] [代码][代码]var[代码] [代码]_this = [代码][代码]this[代码][代码] [代码][代码]var[代码] [代码]array = [][代码][代码] [代码][代码]wx.connectSocket({[代码][代码] [代码][代码]url:[代码][代码]'xx'[代码][代码],[代码][代码] [代码][代码]header:{[代码][代码] [代码][代码]'content-type'[代码][代码]: [代码][代码]'application/json'[代码][代码] [代码][代码]},[代码][代码] [代码][代码]success:[代码][代码]function[代码][代码](r){[代码][代码] [代码][代码]console.log(r,[代码][代码]'connectSocket'[代码][代码])[代码][代码] [代码][代码]}[代码][代码] [代码][代码]})[代码][代码] [代码][代码]wx.onSocketOpen([代码][代码]function[代码][代码](r){[代码][代码] [代码][代码]var[代码] [代码]data = 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){[代码][代码] [代码][代码]var[代码] [代码]temp = 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数据更新引发样式中的评论更新 截图 [图片] [图片] 如图所示,我说闪动就是 快速出现->快速消失->快速出现
小程序直播cover-view与cover-image闪动- 当前 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
2019-01-04