收藏
回答

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

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug cover-view 客户端 7.0.1 2.4.3

- 当前 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 个回答

  • 得不到的地瓜
    得不到的地瓜
    2019-02-12

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

    2019-02-12
    有用
    回复
  • 是柿子啊
    是柿子啊
    2019-01-04

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

    2019-01-04
    有用
    回复
  • 阿姆斯特朗回旋加速阿姆斯特朗炮
    阿姆斯特朗回旋加速阿姆斯特朗炮
    2019-01-04
    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数据更新引发样式中的评论更新


    截图




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

    2019-01-04
    有用
    回复
登录 后发表内容