x***@sina.com

发布：2022-09-09 12:26
更新：2023-06-01 16:31
阅读：302

【报Bug】列表中使用rich-text组件，部分渲染失败

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： 12.3.1

HBuilderX类型：正式

HBuilderX版本号： 3.5.3

手机系统： iOS

手机系统版本号： iOS 15

手机厂商：苹果

手机机型： iphoneX,iphone6P

页面类型： nvue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

示例代码：

<view style="flex-direction: row;background-color: #2BD7FF; margin-top: 30rpx;" v-for="(item, index) in list" :key="item.id">
<rich-text class="case" :nodes="item.content" style="color: #232428;font-size: 30rpx;background: transparent;" />
</view>

for(let i=0; i< 30;i++){
list.push({
id: i,
content: [{
"name": "p",
"attrs": {
"style": "line-height: 60px;background: transparent;"
},
"children": [{
"type": "text",
"text": "44444"
}]
}]
})
}

操作步骤：

按上面代码就可复现

预期结果：

全部渲染成功

实际结果：

渲染常有不成功，且随机性

bug描述：

在nvue中使用rich-text组件渲染富文本时有着严重的问题，第一是慢，虽然不好让人接受，但可以忍受；第二就是渲染的成功很随机，尤其是在列表中循环的时候最为明显。

上传了两张图，数据都是相同的，背景有白色底的，文字大的是渲染失败的

2022-09-09 12:26 负责人:无分享

2 个回复

x***@sina.com (作者)

为什么我贴的代码还丢了一部分呢？补在这里
<view style="flex-direction: row;background-color: #2BD7FF; margin-top: 30rpx;" v-for="(item, index) in list" :key="item.id">
<rich-text class="case" :nodes="item.content" style="color: #232428;font-size: 30rpx;background: transparent;" />
</view>

安身之地

请问这个问题，你最后怎么解决的？我用3.6.18版本依然存在这个问题

要回复问题请先登录或注册

【报Bug】列表中使用rich-text组件，部分渲染失败

操作步骤：

按上面代码就可复现

预期结果：

全部渲染成功

实际结果：

渲染常有不成功，且随机性

bug描述：

2 个回复

公告

相关问题

【报Bug】列表中使用rich-text组件，部分渲染失败

操作步骤： 按上面代码就可复现

预期结果： 全部渲染成功

实际结果： 渲染常有不成功，且随机性

bug描述：

与内容相关的链接

2 个回复

公告

相关问题

操作步骤：

按上面代码就可复现

预期结果：

全部渲染成功

实际结果：

渲染常有不成功，且随机性