uni-app rich-text 组件里面白色背景无法去掉

uni-app rich-text 组件里面白色背景无法去掉

示例代码：

<rich-text :nodes="creatListNode(x)" class="rich-text" style="background-color: #F5F5F5;"></rich-text>

操作步骤：

  • 必现

预期结果：

  • 去掉白色背景

实际结果：

  • 无

bug描述：

项目信息 详细信息
产品分类 uniapp/App
PC开发环境 Mac
PC操作系统版本 macOS 12
HBuilderX类型 正式
HBuilderX版本 3.3.2
手机系统 iOS
手机系统版本 iOS 15
手机厂商 苹果
手机机型 iPhone 11
页面类型 nvue
Vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

Image Image


更多关于uni-app rich-text 组件里面白色背景无法去掉的实战教程也可以访问 https://www.itying.com/category-93-b0.html

14 回复

.uni-common-mt {
background-color: rgba(0,0,0,0) !important;
}

更多关于uni-app rich-text 组件里面白色背景无法去掉的实战教程也可以访问 https://www.itying.com/category-93-b0.html


不管用，还有白色背景

并且字体也是忽大忽小，没有规律

您好，请问这个问题解决了吗

安卓真机没有问题，背景没有白色，ios真机有白色背景

发代码文件

rich-text 是透明的 最外层的view，影响rich-text 颜色
<view class="uni-common-mt" style="padding:20rpx;">
<rich-text :nodes="strings"></rich-text>
</view>

静态的没有问题，你看我的截图，list循环的rich-text才有问题，并且不是所有循环出来的都有问题，就那么几条有问题，集中表现在最后面的几条数据

回复 吕先森: 这个问题现在解决了嘛 我现在发现还是有

官方回复一下，不是上面这位达人说的问题，看我的截图，明显就是list循环出来的rich-text是有问题的，静态的没有问题，并且循环出来的不确定哪个有白色背景，貌似是list最后面的几条数据会出现白色背景

最好提供一个vue，把你代码放在，能直接重现bug

使用最新版本HX 测试一下此问题是否解决？如未解决请上传一个可复现此问题的完整实例工程便于排查

作者最后解决了吗 我也遇到这个问题，动态选然后部分节点的白色背景是白色 父级节点和节点自身都加了 background: transparent"

根据你的描述，这是一个在uni-app的nvue页面中使用rich-text组件时遇到的背景色问题。从你提供的截图来看，rich-text内部确实存在白色背景，这通常是由于以下原因造成的：

问题分析

  1. nvue渲染机制差异：nvue页面使用原生渲染，与vue页面的WebView渲染不同，样式支持存在差异
  2. rich-text内部节点样式：rich-text组件渲染的HTML内容可能自带了背景色样式
  3. CSS继承限制：在nvue中，部分CSS属性无法完全继承到rich-text内部

解决方案

方案1：修改rich-text内部节点的样式

在你的creatListNode(x)方法返回的节点数据中，确保所有节点都设置了透明背景：

creatListNode(x) {
  // 确保每个节点都有透明背景
  const nodes = x.map(item => ({
    // ...其他属性
    style: 'background-color: transparent;' + (item.style || '')
  }))
  return nodes
}

方案2：使用全局样式覆盖

在App.vue或页面样式中添加：

/* 如果是nvue页面 */
.rich-text >>> * {
  background-color: transparent !important;
}

/* 或者尝试 */
.rich-text {
  background-color: transparent;
}

方案3：检查父容器样式

确保rich-text的父容器也没有设置白色背景：

<view style="background-color: #F5F5F5;">
  <rich-text :nodes="creatListNode(x)" class="rich-text"></rich-text>
</view>

方案4：使用条件编译处理平台差异

如果是特定平台的问题：

<rich-text 
  :nodes="creatListNode(x)" 
  class="rich-text" 
  :style="{'background-color': platform === 'ios' ? 'transparent' : '#F5F5F5'}"
></rich-text>
回到顶部