【微信小程序】text和rich-text组件的基本使用

发布于:2022-12-02 ⋅ 阅读:(270) ⋅ 点赞:(0)

✅作者简介:CSDN内容合伙人、阿里云专家博主、51CTO专家博主🏆
📃个人主页:hacker707的csdn博客🥇
🔥系列专栏:微信小程序
💬个人格言:不断的翻越一座又一座的高山,那样的人生才是我想要的。这一马平川,一眼见底的活,我不想要,我的人生,我自己书写,余生很长,请多关照,我的人生,敬请期待💖💖💖

在这里插入图片描述

常用的基础内容组件

text

文本组件
类似于HTML中的span标签,是一个行内元素

通过text组件中的selectable属性,实现长按选中文本内容的效果:
✅demo.wxml

<view>
    长按复制手机号
    <text selectable>15733271167</text>
</view>

实现效果如下(选择二维码预览查看效果)

在这里插入图片描述

rich-text

富文本组件
支持把HTML字符串渲染为WXML结构

通过rich-text组件的nodes属性节点,把HTML字符串渲染为对应的UI结构

<rich-text nodes="<h4 style='color: lightpink;'>不断的翻越一座又一座的高山,那样的人生才是我想要的。这一马平川,一眼见底的活,我不想要,我的人生,我自己书写,余生很长,请多关照,我的人生,敬请期待💖💖💖</h4>"></rich-text>

✅实现效果如下:

结束语🥇

以上就是微信小程序之text和rich-text组件的基本使用
持续更新微信小程序教程,欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是hacker创作的动力💖💖💖
在这里插入图片描述

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到