uni-app nvue-app 使用livePusher插件时的页面使用rich-text 动态绑定带图片的nodes时 死循环

uni-app nvue-app 使用livePusher插件时的页面使用rich-text 动态绑定带图片的nodes时 死循环

开发环境 版本号 项目创建方式
Windows win764 专业版 sp1 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win764 专业版 sp1

HBuilderX类型：正式

HBuilderX版本号：4.45

手机系统：Android

手机系统版本号：Android 15

手机厂商：OPPO

手机机型：V90P00

页面类型：nvue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

<live-pusher id=‘livePusher’ ref=“livePusher” class=“livePusher” :url=“livepushurl” mode=“RTC” :muted=“muted”
enable-camera=“true” :auto-focus=“false” :beauty=“beauty” :whiteness=“whiteness” aspect=“1:1” @statechange=“statechange” @netstatus=“netstatus” @error=“error” @click=“resetInput”></live-pusher>

<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" [@scrolltoupper](/user/scrolltoupper)="upper" [@scrolltolower](/user/scrolltolower)="lower" [@scroll](/user/scroll)="scroll" > <view v-for="(m,index) in messagelist" [@click](/user/click)="resetInput"> <view class="content" > <text v-if="m.userid!=''" class="nickname">{{m.nickname}}</text> <view class="content-item" > <text v-if="m.nodes==null" class="text" > {{m.content}}</text> <rich-text v-else :nodes="m.nodes"></rich-text> </view> </view> </view> </scroll-view>

uni.$on(‘streamer_message_receive’, data => {
console.log(“BBB主播监听到了”,data);
var msg=data;
console.log(“msgtype===”,msg[“type”],msg);
var msgtext="";
if(msg[“type”]==“message”){
msgtext=msg[“content”];
if(msgtext.trim()!=’’) {
var mynode=_that.getNodesFormMsgText(msgtext);
if(!mynode || mynode.length==0) return ;
msg[“nodes”]=mynode;
_that.messagelist.push(msg);
}
} else{
msgtext=msg[“message”]
_that.userInOut_text=msgtext;
}

})


更多关于uni-app nvue-app 使用livePusher插件时的页面使用rich-text 动态绑定带图片的nodes时 死循环的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

android apk

更多关于uni-app nvue-app 使用livePusher插件时的页面使用rich-text 动态绑定带图片的nodes时 死循环的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在nvue页面中同时使用live-pusher组件和动态绑定rich-text的nodes时出现死循环，通常是由于以下原因：

  1. 渲染循环触发：当rich-text的nodes包含图片时，图片加载完成可能触发页面重绘，而live-pusher作为原生组件层级较高，可能影响页面渲染流程

  2. 数据更新频繁：通过uni.$on持续接收消息并push到messagelist，每次更新都会触发rich-text重新渲染

解决方案：

  1. 优化rich-text渲染：
// 在getNodesFormMsgText方法中确保不返回空数组
getNodesFormMsgText(msgtext) {
    // 处理逻辑...
    return nodes.length > 0 ? nodes : null
}
  1. 控制消息更新频率：
// 添加防抖处理
let updateTimer = null
uni.$on('streamer_message_receive', data => {
    clearTimeout(updateTimer)
    updateTimer = setTimeout(() => {
        // 原有处理逻辑
        if(msgtext.trim() !== '') {
            const mynode = _that.getNodesFormMsgText(msgtext)
            if(!mynode) return
            msg.nodes = mynode
            _that.messagelist.push(msg)
        }
    }, 50)
})
回到顶部