uni-app rich-text组件在百度小程序会莫名奇妙上下有个空白高度

uni-app rich-text组件在百度小程序会莫名奇妙上下有个空白高度

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

rich-text组件在百度小程序会莫名奇妙上下有个空白高度

示例代码：

<rich-text :nodes="goods.detail"></rich-text>

操作步骤：

<rich-text :nodes="goods.detail"></rich-text>
上下有个空白高度

预期结果：

<rich-text :nodes="goods.detail"></rich-text>
上下没有高度

实际结果：

<rich-text :nodes="goods.detail"></rich-text>
上下有个空白高度

更多关于uni-app rich-text组件在百度小程序会莫名奇妙上下有个空白高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app rich-text组件在百度小程序会莫名奇妙上下有个空白高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个百度小程序平台特有的兼容性问题。rich-text组件在百度小程序中默认会添加额外的padding或margin，导致出现空白高度。

解决方案：

  1. 检查富文本内容中是否包含默认样式的p标签
<rich-text :nodes="goods.detail" style="margin:0;padding:0;"></rich-text>
  1. 在App.vue中全局重置rich-text样式
/* App.vue */
rich-text {
  margin: 0;
  padding: 0;
}
  1. 处理富文本数据时清除默认样式
// 在设置nodes前处理HTML内容
goods.detail = goods.detail.replace(/<p/g, '<p style="margin:0;padding:0;"')
  1. 使用条件编译针对百度小程序特殊处理
<!-- #ifdef MP-BAIDU -->
<rich-text :nodes="goods.detail" style="margin:0 !important;padding:0 !important;"></rich-text>
<!-- #endif -->
<!-- #ifndef MP-BAIDU -->
<rich-text :nodes="goods.detail"></rich-text>
<!-- #endif -->
回到顶部