小程序直播cover-view与cover-image闪动
发布于 6 年前 作者 liufang 13573 次浏览 来自 问答
  • 当前 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
3 回复

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

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

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

截图

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

回到顶部