xinkong2000
xinkong2000
  • 发布:2022-09-09 12:26
  • 更新:2023-06-01 16:31
  • 阅读:433

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

分类:uni-app

产品分类: 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 负责人:无 分享
已邀请:
xinkong2000

xinkong2000 (作者) - 1

为什么我贴的代码还丢了一部分呢?补在这里
<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版本依然存在这个问题

要回复问题请先登录注册