uni-app nvue下ios端rich-text组件bug，列表页标题使用了rich-text，下拉刷新出现最新一条数据时，标题内容仍然是上一条数据的标题内容。

uni-app nvue下ios端rich-text组件bug，列表页标题使用了rich-text，下拉刷新出现最新一条数据时，标题内容仍然是上一条数据的标题内容。

操作步骤：

  • 只要有最新的记录，下拉刷新出现最新一条记录，但标题就会显示上一条的标题！

预期结果：

  • 下拉刷新能正常渲染，

实际结果：

  • 最新的标题是上一条记录的,没正常渲染，

bug描述：

【报Bug】nvue下ios端rich-text组件bug，列表页标题使用了rich-text，下拉刷新出现最新一条数据的时候，标题的内容仍然是上一条数据的标题内容，出现重复标题
Android的rich-text也有问题，信息错位了！
附件1：界面显示错位效果；
附件2：演示代码实例。

信息类别 信息内容
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Windows10
HBuilderX类型 正式
HBuilderX版本号 3.2.16
手机系统 iOS
手机系统版本号 iOS 11.4
手机厂商 苹果
手机机型 iphone 6sp
页面类型 nvue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

界面显示错位效果
yikeyueAppDemo.rar


更多关于uni-app nvue下ios端rich-text组件bug，列表页标题使用了rich-text，下拉刷新出现最新一条数据时，标题内容仍然是上一条数据的标题内容。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

你好请上传一个能复现问题的示例工程便于排查

更多关于uni-app nvue下ios端rich-text组件bug，列表页标题使用了rich-text，下拉刷新出现最新一条数据时，标题内容仍然是上一条数据的标题内容。的实战教程也可以访问 https://www.itying.com/category-93-b0.html


代码示例项目已经上传到附件，烦请帮助排查问题。

感谢反馈，iOS端的问题已经确认，Android端的问题你在详细描述一下吧，具体是什么表现

一.在nvue页面当中的情况： Android端这种大图片显示非常模糊；iOS显示很清晰。 附件1：Android； 附件2：iOS
二.在vue页面中的情况： Android和iOS都很清晰，完全正常。
在vue和nvue都是这样的设置。 <image mode="widthFix" class="w750"></image>


看下图片的宽高是多少。android平台应该是触发了大小限制压缩了

回复 DCloud_Android_ST: 看到了之前的回复，是超过了压缩限制

这是一个已知的 nvue 中 rich-text 组件的渲染问题，主要出现在 iOS 端的下拉刷新场景。当数据更新时，rich-text 的 DOM 节点可能未正确刷新，导致显示旧数据。

临时解决方案：

  1. 使用 v-if 强制重新渲染：在 rich-text 外层包裹容器，通过 v-if 控制其销毁与重建。

    <view v-if="showRichText">
  <rich-text :nodes="content"></rich-text>
</view>

    在数据更新后，先设置 showRichText = false，再在 $nextTick 中设置为 true。

  2. 避免使用 rich-text：如果内容简单，考虑改用 text 组件拼接，或使用 uParse 等第三方解析库。

  3. 使用 :key 强制更新：为 rich-text 绑定一个唯一的 key 值（如结合数据 ID），数据更新时 key 变化会触发组件重新渲染。

    <rich-text :key="item.id" :nodes="item.content"></rich-text>
回到顶部