uni-app ios手机nvue页面中使用rich-text节点样式不生效问题

uni-app ios手机nvue页面中使用rich-text节点样式不生效问题

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

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.1.17

手机系统：iOS

手机系统版本号：iOS 11.0

手机厂商：苹果

手机机型：iPhone6，iPhone8，iPhone11

页面类型：nvue

打包方式：云端

项目创建方式：HBuilderX

操作步骤：

新建一个nvue文件，粘贴以下代码：

<template>  
    <div style="padding-top: 200rpx">  
        <rich-text :nodes="nodes"></rich-text>  
    </div>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            nodes: [  
                {  
                    name: 'span',  
                    children: [  
                        {  
                            name: 'a',  
                            attrs: {  
                                href: 'http://www.baidu.com',  
                                target: '_blank',  
                                class: 'link',  
                                style: 'color:blue;background-color:pink;'  
                            },  
                            children: [  
                                {  
                                    type: 'text',  
                                    text: 'http://www.baidu.com'  
                                }  
                            ]  
                        },  
                        {  
                            type: 'text',  
                            text: '噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢'  
                        }  
                    ]  
                }  

            ]  
        };  
    }  
};  
</script>  

<style scoped>  
.link {  
    color: blue;  
    background-color: pink;  
}  
</style>

更多关于uni-app ios手机nvue页面中使用rich-text节点样式不生效问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

问题已复现，后续优化，已加分，感谢您的反馈！

更多关于uni-app ios手机nvue页面中使用rich-text节点样式不生效问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


新增 string 类型不显示

优化了没

在iOS的nvue页面中，rich-text组件确实存在样式解析的限制。根据你的代码，问题主要出现在以下几个方面：

  1. nvue的样式支持差异：nvue页面使用的是原生渲染，对CSS的支持不如vue页面完整。在nvue中，rich-text组件对节点内联样式的支持有限，特别是通过class选择器定义的样式可能无法正确应用。

  2. 内联样式解析问题：你虽然在节点attrs中定义了style: 'color:blue;background-color:pink;'，但在iOS的nvue环境下，rich-text可能无法正确解析这种内联样式写法。

建议修改方案：

将样式直接以内联方式写在节点属性中，但需要调整写法：

nodes: [
    {
        name: 'span',
        children: [
            {
                name: 'a',
                attrs: {
                    href: 'http://www.baidu.com',
                    target: '_blank',
                    style: 'color: blue; background-color: pink; text-decoration: none; padding: 4px;'
                },
                children: [
                    {
                        type: 'text',
                        text: 'http://www.baidu.com'
                    }
                ]
            }
        ]
    }
]
回到顶部