uni-app nvue 页面 rich-text 标签nodes 传入string类型不显示 传入节点无法设置字体大小

uni-app nvue 页面 rich-text 标签nodes 传入string类型不显示 传入节点无法设置字体大小

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

产品分类：

  • uniapp/App

PC开发环境操作系统：

  • Windows

HBuilderX类型：

  • 正式

HBuilderX版本号：

  • 3.1.21

手机系统：

  • Android

手机系统版本号：

  • Android 11

手机厂商：

  • 小米

手机机型：

  • mi8

页面类型：

  • vue

打包方式：

  • 云端

示例代码：

<template>
<view class="content">
<text class="text">{{title}}</text><text class="text">{{title}}</text>
<rich-text :nodes="title"></rich-text>
</view>
</template> 
<script>
export default {
data() {
return {
title: '<div style="color:#000;" > Hello </div> '
}
},
onLoad() {  
},  
methods: {  
}  
}
</script> 
<style>
.text {
font-size: 26rpx;
color: #8f8f94;
}
</style>

操作步骤：

<template>
<view class="content">
<text class="text">{{title}}</text><text class="text">{{title}}</text>
<rich-text :nodes="title"></rich-text>
</view>
</template> 
<script>
export default {
data() {
return {
title: '<div style="color:#000;" > Hello </div> '
}
},
onLoad() {  
},  
methods: {  
}  
}
</script> 
<style>
.text {
font-size: 26rpx;
color: #8f8f94;
}
</style>

更多关于uni-app nvue 页面 rich-text 标签nodes 传入string类型不显示 传入节点无法设置字体大小的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app nvue 页面 rich-text 标签nodes 传入string类型不显示 传入节点无法设置字体大小的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 的 nvue 页面中，rich-text 组件的 nodes 属性对字符串类型的 HTML 内容支持有限，尤其是在 Android 平台。根据你的代码，问题可能出现在以下方面：

  1. nodes 传入字符串不显示：nvue 环境下的 rich-text 组件默认可能无法直接解析字符串格式的 HTML。建议将 nodes 转换为数组格式。例如：

    data() {
  return {
    title: [{
      name: 'div',
      attrs: { style: 'color:#000;' },
      children: [{ type: 'text', text: 'Hello' }]
    }]
  }
}

  2. 字体大小无法设置：在 nvue 中，样式支持与 vue 页面有所不同。确保使用支持的 CSS 单位（如 px），并检查样式是否被正确应用。避免使用 rpx，因为在部分 nvue 场景下可能不生效。可以尝试直接内联样式：

    attrs: { style: 'color:#000;font-size:14px;' }
回到顶部