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 标签闭合或不闭合均兼容。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

统计学-R语言-2.2

文章目录 前言导入.RData文件方式1方式2方式3 导入程序包方式一方式二 总结 前言 本篇文章是将上篇得软件安装完&#xff0c;对其部分功能进行介绍。 导入.RData文件 在我们日常练习时会有.RData文件导入&#xff0c;并对其进行分析&#xff0c;下面是两种方导入.RData文件。…

通义千问协助分析openHarmony内核编译故障记录

drivers/hdf/khdf/manager/../../../..//framework/utils/src/hdf_sbuf.c:271:6: 错误&#xff1a; ‘-mgeneral-regs-only’ is incompatible with floating-point argument 这个编译错误提示指出&#xff0c;在编译源文件 "hdf_sbuf.c"&#xff08;位于 "driv…

纯html写个个人简历!模版分享啦!!!

用纯html写个个人简历&#xff01;首先得先找个模板&#xff01; 一个优秀模板所应该具有的素质&#xff1f; 简单&#xff1f; 仅仅一个html页面&#xff0c;完全没有乱七八糟&#xff0c;保证学的明明白白。 简单整洁&#xff1f; 该有的内容一个不少&#xff01; 一个完…

快速上手Docker:构建、运行与管理你的容器

快速上手Docker&#xff1a;构建、运行与管理你的容器 引言Docker基础知识1. Docker简介2. 核心概念3. Docker与虚拟机的比较 安装与配置Docker1. 安装Docker2. 配置Docker 构建Docker镜像1. 创建Dockerfile2. 构建镜像3. 验证镜像 运行Docker容器1. 从镜像运行容器2. 查看运行…

Java重写ArrayList方法

前言&#xff1a;ArrayList中有很多方法&#xff0c;我们只有深知这些方法是怎么实现的才能更好的使用&#xff0c;不用死记硬背 我们来一一实现&#xff08;重写&#xff09; 前提准备&#xff1a;我们需要先创建一个类&#xff0c;类中写ArrayList的内部结构组成 public cl…

计算机毕业设计 | SpringBoot+vue校园问卷调查系统(附源码)

1&#xff0c;绪论 研究目的 在进入21世纪以后&#xff0c;互联网得到了蓬勃的发展&#xff0c;电子问卷调查也开始逐渐流行起来。传统纸质问卷和电子问卷相比较后&#xff0c;传统问卷还存在很多弊端&#xff1a; 问卷分发起来比较困难&#xff0c;并且分发试卷耗费大量的金…

使用官方构建工具来创建一个vue3的项目

当你使用 Vite 构建项目时&#xff0c;可能会发现在命令行界面无法选择是否包含 TypeScript 等其他基础配置。此外&#xff0c;使用 vue create 命令创建项目时&#xff0c;默认会使用 vue-cli&#xff0c;但项目启动等过程可能较慢。在这种情况下&#xff0c;你可以参考以下步…

Web3去中心化存储:重新定义云服务

随着Web3技术的崭露头角&#xff0c;去中心化存储正在成为数字时代云服务的全新范式。传统的云服务依赖于中心化的数据存储架构&#xff0c;而Web3的去中心化存储则为用户带来了更安全、更隐私、更可靠的数据管理方式&#xff0c;重新定义了云服务的未来。 1.摒弃中心化的弊端 …

报考人工智能证书都学哪些内容?好过吗?

由国家工信部权威认证的人工智能证书是跨入人工智能行业的敲门砖&#xff0c;随着人工智能技术的发展越来越成熟&#xff0c;相关的从业人员也会剧增&#xff0c;证书的考取难度也会变高。如果已经从事或者准备从事人工智能行业的人员&#xff0c;对于考证宜早不宜迟&#xff0…

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

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

如何使用Lychee结合内网穿透搭建私人图床网站并发布至公网远程访问

文章目录 1.前言2. Lychee网站搭建2.1. Lychee下载和安装2.2 Lychee网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4.公网访问测试5.结语 1.前言 图床作为图片集中存放的服务网站&#xff0c;可以看做是云存储的一部分&#xff0c;既可…

多云架构下的点击流数据分析

在出海的大趋势下&#xff0c;需要对点击流数据进行分析&#xff0c;以便更快的确定客户。作为多家云厂商的合作伙伴&#xff0c;九河云将提供点击流数据分析的改良方案。 对于这个需求可以借助aws的受众细分和定位解决方案&#xff0c;您可以应用基于云的分析和机器学习来减少…

操作系统-操作系统的概念和功能

文章目录 大家熟悉的操作系统总览操作系统的概念&#xff08;定义&#xff09;操作系统的功能和目标-作为系统资源的管理者操作系统的功能和目标-向上层提供方便易用的服务图形化用户接口联机命令接口脱机命令接口程序接口小结 操作系统的功能和目标-作为最解决硬件的层次小结 …

muduo网络库剖析——套接字Socket类

muduo网络库剖析——套接字Socket类 前情从muduo到my_muduo 概要socket网络编程socket编程接口介绍头文件socketbindlistenacceptaccept4connect 框架与细节成员函数使用方法 源码结尾 前情 从muduo到my_muduo 作为一个宏大的、功能健全的muduo库&#xff0c;考虑的肯定是众多…

Java重修第七天—内部类

通过学习本篇文章可以掌握如下知识 成员内部类 静态内部类 局部内部类 匿名内部类(重点掌握) 内部类 是类中的五大成分之一(成员变量、方法、构造器、内部类、代码块)&#xff0c;其定义为&#xff1a;如果一个类定义在另一个类的内部&#xff0c;这个类就是内部类。 场景…

SqlAlchemy使用教程(四) MetaData 与 SQL Express Language 的使用

四、Database MetaData 与 SQL Express Language 的使用 MetaData对象用于描述表结构&#xff0c;SQL Express Language是DBAPI SQL的统一封装器。MetaData 与SQL Express 语句可以在Core层使用&#xff0c;ORM层基于MetaData, SQL Express基础上做了进一步抽象。本章将介绍在…

如何使用Docker本地搭建Traefik服务并实现公网访问管理界面

文章目录 前言1. Docker 部署 Trfɪk2. 本地访问traefik测试3. Linux 安装cpolar4. 配置Traefik公网访问地址5. 公网远程访问Traefik6. 固定Traefik公网地址 前言 Trfɪk 是一个云原生的新型的 HTTP 反向代理、负载均衡软件&#xff0c;能轻易的部署微服务。它支持多种后端 (D…

电动工具直流调速专用集成电路GS069,具有电源电压范围宽、功耗小、抗干扰能力强等特性

GS069电动工具直流调速电路是CMOS专用集成电路&#xff0c;具有电源电压范 围宽、功耗小、抗干扰能力强等特点。通过外接电阻网络&#xff0c;改变与之相接 的VMOS 管的输出&#xff0c;达到控制电动工具转速的作用。该电路输出幅值宽&#xff0c; 频率变化小&#xff0c;占空比…

pytorch10:正则化(weight_decay、dropout、Batch Normalization)

目录 一、正则化regularization1.概念2.过拟合3.减小方差策略4 正则化--权值衰减 二、正则化-dropout2.1 dropout概念2.2 数据尺度变化2.3 nn.Dropout2.4 两种模式 三、Batch Normalization3.1 ICS现象&#xff08;Internal Covariate Shift&#xff0c;内部协变量偏移)3.2 BN原…

本地搭建Oracle数据库结合内网穿透实现公网环境远程访问

最近&#xff0c;我发现了一个超级强大的人工智能学习网站。它以通俗易懂的方式呈现复杂的概念&#xff0c;而且内容风趣幽默。我觉得它对大家可能会有所帮助&#xff0c;所以我在此分享。点击这里跳转到网站。 文章目录 前言1. 数据库搭建2. 内网穿透2.1 安装cpolar内网穿透2…