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

2024-01-15 15:36

本文主要是介绍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 标签闭合或不闭合均兼容。

这篇关于text、icon、progress、rich-text等基础内容小部件(Widget)组件代码明细的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/609376

相关文章

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入:从乌龟到猎豹的蜕变分页查询:加载百万数据异步处理:拒绝界面

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

java之Objects.nonNull用法代码解读

《java之Objects.nonNull用法代码解读》:本文主要介绍java之Objects.nonNull用法代码,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录Java之Objects.nonwww.chinasem.cnNull用法代码Objects.nonN

SpringBoot实现MD5加盐算法的示例代码

《SpringBoot实现MD5加盐算法的示例代码》加盐算法是一种用于增强密码安全性的技术,本文主要介绍了SpringBoot实现MD5加盐算法的示例代码,文中通过示例代码介绍的非常详细,对大家的学习... 目录一、什么是加盐算法二、如何实现加盐算法2.1 加盐算法代码实现2.2 注册页面中进行密码加盐2.

python+opencv处理颜色之将目标颜色转换实例代码

《python+opencv处理颜色之将目标颜色转换实例代码》OpenCV是一个的跨平台计算机视觉库,可以运行在Linux、Windows和MacOS操作系统上,:本文主要介绍python+ope... 目录下面是代码+ 效果 + 解释转HSV: 关于颜色总是要转HSV的掩膜再标注总结 目标:将红色的部分滤

C#基础之委托详解(Delegate)

《C#基础之委托详解(Delegate)》:本文主要介绍C#基础之委托(Delegate),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 委托定义2. 委托实例化3. 多播委托(Multicast Delegates)4. 委托的用途事件处理回调函数LINQ

在C#中调用Python代码的两种实现方式

《在C#中调用Python代码的两种实现方式》:本文主要介绍在C#中调用Python代码的两种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C#调用python代码的方式1. 使用 Python.NET2. 使用外部进程调用 Python 脚本总结C#调