text、icon、progress、rich-text等基础内容小部件(Widget)组件代码明细

属性说明和代码明细如下:

text

文本。

属性说明

属性名类型默认值必填说明
user-selectbooleanfalse文本是否可选,该属性会使文本节点显示为 inline-block

示例代码

TYML
<view class="text-page"><view class="page-body"><view class="l-r-padding"><view class="text-box" scroll-y="true" scroll-top="{{scrollTop}}"><text>{{text}}</text></view><button bind:tap="add" class="btn">add line</button><button bind:tap="remove" class="btn">remove line</button></view></view>
</view>

JS
const texts = ['涂鸦智能(NYSE: TUYA)','是全球领先的 IoT 云平台, ','连接品牌、OEM 厂商、开发者','和连锁零售商的智能化需求, ','提供一站式人工智能物联网的 PaaS 级解决方案。','并且涵盖了硬件开发工具、','全球云、智慧商业平台开发三方面, ','提供从技术到营销渠道的全面生态赋能, ','打造世界领先的 IoT 云平台。','涂鸦 IoT 开发平台累计有超过32.4万注册开发者, ','日语音 AI 交互超1.22亿次, ','每日设备请求次数840亿次','......',
];Page({data: {text: '',canAdd: true,canRemove: false,},extraLine: [],add() {this.extraLine.push(texts[this.extraLine.length % 12]);let canAdd = this.extraLine.length < 12;this.setData({text: this.extraLine.join('     '),canAdd: canAdd,canRemove: this.extraLine.length > 0,});},remove() {if (this.extraLine.length > 0) {this.extraLine.pop();this.setData({text: this.extraLine.join('     '),canAdd: this.extraLine.length < 12,canRemove: this.extraLine.length > 0,});}},
});

TYSS
.text-page {height: 100vh;
}.component-title {font-size: 28px;line-height: 40px;text-align: center;padding: 30px 25px 40px;
}
.title-text {display: inline-block;padding: 0 20px 10px 20px;border-bottom: 1px solid #000;
}.btn {display: block;margin: 20px 0;
}
.text-box {margin-bottom: 35px;padding: 20px 0;display: flex;min-height: 150px;background-color: #ffffff;justify-content: center;align-items: center;text-align: center;font-size: 15px;color: #353535;line-height: 2em;
}
.page-section {margin: 0 40px;
}.separtor {display: block;line-height: 60rpx;
}

 

 icon

 图标。组件属性的长度单位默认为 px。

属性说明

属性名类型默认值必填说明
typestringicon 的类型
sizenumber/string23icon 的大小
colorcoloricon 的颜色,同 css 的 color

type 值

示例代码

TYML
<icon class="icon-box-img" type="warn" size="93" color="#C9C9C9"></icon>

 

 progress

 进度条。

属性说明

属性类型默认值必填说明
percentnumber百分比 0~100
show-infobooleanfalse在进度条右侧显示百分比
border-radiusnumber/string0圆角大小,默认为 rpx
font-sizenumber/string16右侧百分比字体大小,默认为 px
stroke-widthnumber/string6进度条线的宽度,默认为 rpx
active-Colorstring#007aff已选择的进度条的颜色
background-colorstringrgba(0,0,0,.04)未选择的进度条的颜色
activebooleanfalse进度条从左往右的动画
active-modestringbackwardsbackwards: 动画从头播;forwards:动画从上次结束点接着播

 

示例代码

TYML
<view class="progress-box"><progress percent="20" show-info stroke-width="3"/>
</view><view class="progress-box"><progress percent="40" active stroke-width="3" /><icon class="progress-cancel" type="cancel"></icon>
</view><view class="progress-box"><progress percent="60" active stroke-width="3" />
</view><view class="progress-box"><progress percent="80" activeColor="#10AEFF" active stroke-width="3" />
</view>

 

rich-text 

富文本。

事件

事件名说明参数
bind:select点击富文本内标签时返回

属性说明

属性名类型默认值必填说明
nodesarray/string[]节点列表/HTML String
nodes

现支持两种节点,通过 type 来区分,分别是元素节点和文本节点,默认是元素节点,在富文本区域里显示的 HTML 节点。

元素节点:type = node
属性说明类型必填备注
name标签名string支持部分受信任的 HTML 节点
attrs属性object支持部分受信任的属性,遵循 Pascal 命名法
children子节点列表array结构和 nodes 一致
文本节点:type = text
属性说明类型必填备注
text文本string支持 entities

受信任的 HTML 节点及属性 

全局支持 class 和 style 属性,不支持 id 属性

节点属性
a
abbr
address
article
aside
b
bdi
bdodir
big
blockquote
br
caption
center
cite
code
colspan width
colgroupspan width
dd
del
div
dl
dt
em
fieldset
font
footer
h1
h2
h3
h4
h5
h6
header
hr
i
imgalt src height width
ins
label
legend
li
mark
nav
olstart type
p
pre
q
rt
ruby
s
section
small
span
strong
sub
sup
tablewidth
tbody
tdcolspan height rowspan width
tfoot
thcolspan height rowspan width
thead
trcolspan height rowspan width
tt
u
ul
videosrc controls controlslist autoplay loop muted playsinline poster reload crossorigin width height
pre

 

示例代码

<view class="rich-text-wrap" ty:if="{{isHTMLRender}}"><rich-text nodes="{{htmlContent}}"></rich-text>
</view><view class="rich-text-wrap" ty:if="{{isNodesRender}}"><rich-text nodes="{{nodes}}"></rich-text>
</view><button type="primary" class="btn" bind:tap="showHTMLRender">渲染HTML</button>
<button type="primary" class="btn" bind:tap="showNodeRender">渲染Node</button>
Page({data: {htmlContent:'<div><h1>Title</h1><p>Life is <i>like</i> a box of <b>chocolates</b>.</p></div>',isHTMLRender: false,nodes: [{name: 'div',attrs: {name: 'outer',},children: [{type: 'text',text: 'You never know what you are gonna get.',},],},],isNodesRender: false,},showHTMLRender() {this.setData({isHTMLRender: true,});},showNodeRender() {this.setData({isNodesRender: true,});},
});

常见问题(FAQ)

如何为 rich-text 富文本添加链接跳转功能?

可通过 bing:select 事件中 event.detail 实现,如下:

<rich-text nodes="{{htmlContent}}" bind:select="handleSelect"></rich-text>
Page({handleSelect(e) {console.log(e);// {//   type: "select",//   timeStamp: 10597,//   currentTarget: { offsetTop: 195, offsetLeft: 25, id: "", dataset: {} },//   target: { offsetTop: 195, offsetLeft: 25, id: "", dataset: {} },//   detail: {//     name: "a",//     attrs: { href: "http://example.com", style: "font-size: 30px;" },//   },// }// 通过 e.detail 获取到当前点击的节点信息,可通过 e.detail.attrs.href 获取到链接地址// 使用 ty.openInnerH5 打开链接},
});

HTML String 中存在多个 如 img 标签且不闭合时,会不会出现转换错误?

不会,我们支持 img 标签闭合或不闭合均兼容。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/624161.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

升降式OLED透明屏,影响价格的因素有这6大方面

以下是一篇关于升降OLED透明屏的文章&#xff0c;包括其规格、实现原理、应用领域、特色优势和价格等方面&#xff1a; 升降OLED透明屏的规格升降OLED透明屏的尺寸可以根据不同的需求进行定制&#xff0c;尺寸范围从32英寸到200英寸不等。同时&#xff0c;它的厚度不到1厘米&am…

【面试突击】Java内存模型实战

&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308; 欢迎关注公众号&#xff08;通过文章导读关注&#xff1a;【11来了】&#xff09;&#xff0c;及时收到 AI 前沿项目工具及新技术 的推送 发送 资料 可领取 深入理…

使用GraphQL实现简单的增删改查

使用GraphQL实现简单的增删改查 GraphQL官网&#xff1a;https://graphql.cn/ Altair Graphql 调试工具&#xff1a;https://saltair.sirmuel.design/#download 或者添加扩展使用网页版&#xff1a;https://chrome.google.com/webstore/detail/altair-graphql-client/flnheeel…

中国数据库市场的领军黑马——亚信安慧AntDB数据库

自2008年问世以来&#xff0c;亚信科技AntDB数据库一直在中国国产数据库市场中崭露头角&#xff0c;尤其在信创政策的大力支持下&#xff0c;成为这一领域的一匹黑马。经过多次迭代&#xff0c;AntDB已经发展到了7.0版本&#xff0c;为超高强度和密度的业务需求提供了强有力的解…

基于Python的二氧化碳排放量数据分析系统

项目背景&#xff1a; 随着全球气候变化问题日益严重&#xff0c;减少温室气体排放已成为全球共识。我国作为全球最大的碳排放国&#xff0c;承担着重要的国际责任。为了更好地控制和减少碳排放&#xff0c;需要对全国的碳排放情况进行深入研究和分析。本项目旨在构建一个基于P…

【Linux】网络诊断 traceroute命令详解

目录 一、traceroute概述 1.1 traceroute命令简介 1.2 命令格式 1.3 原理 1.4 命令功能 二、使用实例 实例1&#xff1a;traceroute 用法简单、最常用的用法 实例2&#xff1a;跳数设置 实例3&#xff1a;设置探测数据包数量 实例4&#xff1a;显示IP地址&#xff0c…

一小时掌握:使用ScrapySharp和C#打造新闻下载器

引言 爬虫技术是指通过编程的方式&#xff0c;自动从互联网上获取和处理数据的技术。爬虫技术有很多应用场景&#xff0c;比如搜索引擎、数据分析、舆情监测、电商比价等。爬虫技术也是一门有趣的技术&#xff0c;可以让你发现网络上的各种有价值的信息。 本文将介绍如何使用…

leetcode 142 环形链表II

题目 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内部使…

C语言经典算法之简单选择排序算法

目录 前言 建议&#xff1a; 简介&#xff1a; 一、代码实现 二、时空复杂度&#xff1a; 时间复杂度&#xff1a; 空间复杂度&#xff1a; 三、算法的特性&#xff1a; 四、总结 前言 建议&#xff1a; 1.学习算法最重要的是理解算法的每一步&#xff0c;而不是记住…

MySQl导入与导出远程备份

文章目录 一. navicat导入导出 二. mysqldump命令导入导出导入导出 三. load data infile命令导入导出导入导出 四. 远程备份导入导出思维导图 一. navicat 导入 右键——>运行SQL文件 导出 选中要导出的表➡右键➡转储SQL文件➡数据和结构 二. mysqldump命令导入导出…

Oracle全系列版本官网下载保姆及教程

Oracle全系列版本官网下载方法 下面以下载Oracle12cR2为例说明下载的整个过程。 基本步骤如下&#xff1a; 先注册一个Oracle账号并登录&#xff1b;进入到客户下载页面搜索要下载的数据库版本&#xff1b;得到Oracle下载器(Oracle_SSN_DML_xxxxx.exe)&#xff0c;注意&#xf…

智慧公厕:颠覆传统公共厕所管理的未来之路

公共卫生设施一直是城市管理中的重要环节&#xff0c;而智慧公厕作为一种全新的公用卫生设施&#xff0c;以其融合了物联网、大数据、云计算等新型信息技术的特点&#xff0c;引起了人们的广泛关注。通过智能化手段的管理和服务&#xff0c;智慧公厕不仅解决了传统公厕中存在的…

微机原理常考填空以及注意事项

以下&#xff1a; 1&#xff0c;两条高位地址线未参加地址译码&#xff0c;则对应的地址范围它的容量是多少倍&#xff1f; 答&#xff1a;公式CPU的地址线&#xff08;假设16位&#xff09;&#xff08;它的低位地址线一般进入片内A0~A10&#xff0c;高位A11就是A、A12就是B、…

DNS

目录 一、名字解析介绍和DNS 1.1.什么是DNS 1.2.域名体系结构 1.3.DNS查询方式 1.4.DNS解析过程 1.5.DNS服务器类型 二、安装配置 2.1.DNS软件bind 2.2.修改权限 和 监听地址 2.3.手写域名配置文件 2.4.手写数据库配置文件 2.5检测文件格式的命令 一、名字解析介绍和…

【OpenCV学习笔记12】- 更改颜色空间

关于 OpenCV 官方文档的核心操作告一段落&#xff0c;接下来开始图像处理的学习。学习笔记中会记录官方给出的例子&#xff0c;也会给出自己根据官方的例子完成的更改代码&#xff0c;同样彩蛋的实现也会结合多个知识点一起实现一些小功能&#xff0c;来帮助我们对学会的知识点…

【数学建模美赛M奖速成系列】数据可视化(二)

数据可视化&#xff08;二&#xff09; 写在前面百分比堆叠线条图优点缺点实现pythonmatlab 火山图优点实现pythonmatlab 最后 写在前面 上一篇文章为大家分享了山脊图和气泡图的绘图方法与代码&#xff0c;这里学姐为继续为大家分享百分比堆叠线条图和火山图&#xff0c;包含…

R语言【文章复现】——集成式地绘制高分辨率的多样性分布图,对方法的检验和优化,以及处理思路的思考

参考文献 本文对一篇 2022 年发表在 New Phytologist 的绘图方法文章中的技术路线进行复现。 An integrated high-resolution mapping shows congruent biodiversity patterns of Fagales and Pinales Summary 文中,作者针对在全球尺度上绘制物种分布图提出了一种全新的方法…

华为网络设备 通过路由器子接口 Dot1q终结子接口实现跨VLAN通信

(二层交换机直接跳过三层交换价接入路由器时才使用该配置。推荐使用三层交换机建立VLANIF配置更简洁明了。如果VLAN较少可直接配置&#xff1b;路由器接口&#xff0c;一个物理接口一个VLAN) S1配置 vlan batch 2 to 3interface GigabitEthernet0/0/1port link-type trunkpor…

为什么代码里需要try/catch

throw 语句用来抛出一个用户自定义的异常,在抛出错误时&#xff0c;throw 之后的语句将不会执行 const getApi (data) > {if (isNaN(data)) {throw new Error(Parameter is not a number!);console.log(bar) // 这句永远不会执行&#xff0c;throw之后的代码都不会}}情况一…

[Python练习]使用Python爬虫爬取豆瓣top250的电影的页面源码

1.安装requests第三方库 在终端中输入以下代码&#xff08;直接在cmd命令提示符中&#xff0c;不需要打开Python&#xff09; pip install requests -i https://pypi.douban.com/simple/ 从豆瓣网提供的镜像网站下载requests第三方库 pip install requests 是从国外网站下…