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

相关文章

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

Python实现word文档内容智能提取以及合成

《Python实现word文档内容智能提取以及合成》这篇文章主要为大家详细介绍了如何使用Python实现从10个左右的docx文档中抽取内容,再调整语言风格后生成新的文档,感兴趣的小伙伴可以了解一下... 目录核心思路技术路径实现步骤阶段一:准备工作阶段二:内容提取 (python 脚本)阶段三:语言风格调

Android Mainline基础简介

《AndroidMainline基础简介》AndroidMainline是通过模块化更新Android核心组件的框架,可能提高安全性,本文给大家介绍AndroidMainline基础简介,感兴趣的朋... 目录关键要点什么是 android Mainline?Android Mainline 的工作原理关键

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

使用Java将DOCX文档解析为Markdown文档的代码实现

《使用Java将DOCX文档解析为Markdown文档的代码实现》在现代文档处理中,Markdown(MD)因其简洁的语法和良好的可读性,逐渐成为开发者、技术写作者和内容创作者的首选格式,然而,许多文... 目录引言1. 工具和库介绍2. 安装依赖库3. 使用Apache POI解析DOCX文档4. 将解析

一文详解如何在Python中从字符串中提取部分内容

《一文详解如何在Python中从字符串中提取部分内容》:本文主要介绍如何在Python中从字符串中提取部分内容的相关资料,包括使用正则表达式、Pyparsing库、AST(抽象语法树)、字符串操作... 目录前言解决方案方法一:使用正则表达式方法二:使用 Pyparsing方法三:使用 AST方法四:使用字

C++使用printf语句实现进制转换的示例代码

《C++使用printf语句实现进制转换的示例代码》在C语言中,printf函数可以直接实现部分进制转换功能,通过格式说明符(formatspecifier)快速输出不同进制的数值,下面给大家分享C+... 目录一、printf 原生支持的进制转换1. 十进制、八进制、十六进制转换2. 显示进制前缀3. 指

使用Python实现全能手机虚拟键盘的示例代码

《使用Python实现全能手机虚拟键盘的示例代码》在数字化办公时代,你是否遇到过这样的场景:会议室投影电脑突然键盘失灵、躺在沙发上想远程控制书房电脑、或者需要给长辈远程协助操作?今天我要分享的Pyth... 目录一、项目概述:不止于键盘的远程控制方案1.1 创新价值1.2 技术栈全景二、需求实现步骤一、需求

SpringQuartz定时任务核心组件JobDetail与Trigger配置

《SpringQuartz定时任务核心组件JobDetail与Trigger配置》Spring框架与Quartz调度器的集成提供了强大而灵活的定时任务解决方案,本文主要介绍了SpringQuartz定... 目录引言一、Spring Quartz基础架构1.1 核心组件概述1.2 Spring集成优势二、J

Java中Date、LocalDate、LocalDateTime、LocalTime、时间戳之间的相互转换代码

《Java中Date、LocalDate、LocalDateTime、LocalTime、时间戳之间的相互转换代码》:本文主要介绍Java中日期时间转换的多种方法,包括将Date转换为LocalD... 目录一、Date转LocalDateTime二、Date转LocalDate三、LocalDateTim