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

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

</live-player>

预期表现

当收到新的评论时,不要闪动

复现路径

index页面进入后任意进入一个直播,

提供一个最简复现 Demo

3 回复

vpan1 楼6 年前

有解决方法吗我的也是这个问题

hfang2 楼6 年前

麻烦按照教程提供下代码片段：https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

jbai3 楼5 年前

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数据更新引发样式中的评论更新

截图

如图所示,我说闪动就是快速出现->快速消失->快速出现