uni-app rich-text组件在Nvue页面中解析第一个块级元素后，上方多出了一行无内容区域

uni-app rich-text组件在Nvue页面中解析第一个块级元素后，上方多出了一行无内容区域

测试过的手机

  • iphone8
  • xiaomi6

操作步骤：

见附件示例

预期结果：

无此多余的区域。

实际结果：

多了多余的区域。

bug描述：

在Nvue页面中使用rich-text组件，通过html-parser解析生成了nodes数据共rich-text使用，如果有块级元素开头的内容，渲染后的内容上方有一行无内容区域。如解析：

<p>通过rich-text组件生成的 块级元素内容</p>

现象可见附件图片，项目也传于附件了。

test-rich-text.zip

信息类型 信息内容
产品分类 uniapp/App
PC开发环境 Mac
PC版本号 10.5.2
HBuilderX 正式
HBuilderX版本 3.0.5
手机系统 全部
手机厂商 华为
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app rich-text组件在Nvue页面中解析第一个块级元素后，上方多出了一行无内容区域的实战教程也可以访问 https://www.itying.com/category-93-b0.html

13 回复

通过rich-text组件生成的 块级元素内容

解析这个上方的空白区域更大.......

更多关于uni-app rich-text组件在Nvue页面中解析第一个块级元素后，上方多出了一行无内容区域的实战教程也可以访问 https://www.itying.com/category-93-b0.html


将hello-uni-app项目中的rich-text示例页面类型改成nvue的也会出现此问题。。。。

收到，已反馈给相关组排查

问题确认，已加分，后续优化

优化大半年了

回复 w***@126.com: 预计下一个 alpha 版本即可带上相关优化

HBuilderX alpha 3.2.5+ 已修复

3.2.9 nvue仍然有这个问题 htmlParse之后的node是 [{ “name”: “div”, “children”: [{ “type”: “text”, “text”: “全平台兼容，支持自定义下拉刷新、” }, { “name”: “img”, “attrs”: { “style”: “vertical-align:bottom”, “height”: “20px”, “width”: “20px”, “src”: “https://imgcache.qq.com/open/qcloud/tim/assets/emoji/emoji_4@2x.png” } }, { “type”: “text”, “text”: “上拉加载更多，支持自动管理空数据图、点击返回顶部，支持聊天分页、本地分页，支持展示最后更新时间，支持国际化等等” }] }]

代码解析的有问题，我回复一下帖子

[{
“name”: “div”,
“children”: [{
“type”: “text”,
“text”: “全平台兼容，支持自定义下拉刷新、”
}, {
“name”: “img”,
“attrs”: {
“style”: “vertical-align:bottom”,
“height”: “20px”,
“width”: “20px”,
“src”: “https://imgcache.qq.com/open/qcloud/tim/assets/emoji/emoji_4@2x.png”
}
}, {
“type”: “text”,
“text”: “上拉加载更多，支持自动管理空数据图、点击返回顶部，支持聊天分页、本地分页，支持展示最后更新时间，支持国际化等等”
}]
}]

测试了一下，和其他端展示的一样。

回复 DCloud_UNI_GSQ: …抱歉，我这个是用的自定义底座。。底座还是3.2.8版本

这是一个已知的nvue页面中rich-text组件的渲染问题。当使用html-parser解析html内容并生成nodes数据后，如果第一个元素是块级元素（如p标签），在渲染时会在顶部产生一个空行。

目前可行的解决方案有以下几种：

  1. 在解析html内容时，确保第一个节点不是块级元素。可以在内容前添加一个空文本节点：
nodes.unshift({
  type: 'text',
  text: ''
})
  1. 使用CSS样式调整margin或padding来抵消这个空行：
.rich-text-container {
  margin-top: -1px;
}
回到顶部