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

news/2024/7/20 3:00:18 标签: 物联网, 云开发, SDK, App, 小程序, 开发语言, iot

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

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。

属性说明

属性名类型默认值必填说明
typestring是icon 的类型
sizenumber/string23否icon 的大小
colorcolor否icon 的颜色，同 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-modestringbackwards否backwards: 动画从头播；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.niftyadmin.cn/n/5326252.html

相关文章

【Docker】Docker镜像结构及自定义镜像，镜像上传仓库使用

【Docker】Docker镜像结构及自定义镜像，镜像上传仓库使用

一、引言 Docker镜像是一个只读的Docker容器模板&#xff0c;含有启动Docker容器所需的文件系统结构及其内容&#xff0c;因此是启动一个Docker容器的基础。镜像的结构原理图大致分为四层&#xff1a;共享的内核层、基础镜像层、定制镜像层、可写容器层。 共享的内核层&#xf…
阅读更多...
推荐一款可以自动创建视频的前端Ract框架

推荐一款可以自动创建视频的前端Ract框架

前几天在B站看到科技网红up主**「程序员鱼皮」**分享了一则GitHub年终总结的视频&#xff0c;总结在开发者在 GitHub 这一年的代码贡献&#xff0c;提交记录&#xff0c;修正记录等&#xff0c;而且以动画流程的形式展现出来&#xff0c;画面清晰美观&#xff0c;看起来很高级。…
阅读更多...
数据结构之二叉树的数组表示

数据结构之二叉树的数组表示

二叉树的数组表示 表示完美二叉树 若某节点的索引为i,则该节点的左子节点的索引为2i1,右子节点的索引为2i2 代码实现 给定某节点&#xff0c;获取它的左右字节点&#xff0c;父节点获取前序遍历&#xff0c;中序遍历&#xff0c;后序遍历&#xff0c;层序遍历 /* 数组表示下的…
阅读更多...
数据库SELECT语句

数据库SELECT语句

文章目录 一、检索数据二、排序检索三、过滤数据四、数据过滤4.1 组合WHERE子句1. AND操作符2. OR操作符3. 计算次序 4.2 IN操作符4.3 NOT操作符 五、用通配符过滤LIKE操作符1. 百分号&#xff08;%&#xff09;通配符2. 下划线&#xff08;_&#xff09;通配符 使用通配符的技…
阅读更多...
树形控件中的子项点击显示按钮弹窗

树形控件中的子项点击显示按钮弹窗

效果 MainWindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #include"QStandardItemModel" QT_BEGIN_NAMESPACE namespace Ui { class MainWindow; } QT_END_NAMESPACEclass MainWindow : public QMainWindow {Q_OBJECTpublic:Main…
阅读更多...
【基于 InternLM 和 LangChain 搭建你的知识库】学习笔记

【基于 InternLM 和 LangChain 搭建你的知识库】学习笔记

学习参考文档【基于 InternLM 和 LangChain 搭建你的知识库】 学习参考链接【书生・浦语大模型实战营第三课作业(基础进阶)】 理论 实战 收集原始数据 收集2018年-2020年几年间的优秀数学建模论文 修改脚本文件&#xff0c;测试文件 作业 复现课程知识库助手搭建过程 La…
阅读更多...
Pod的控制器

Pod的控制器

Pod的控制器是什么&#xff1f; pod控制器&#xff1a;工作负载均衡。workload。用于管理pod的中间层。确保pod资源符合预期的状态。 预期状态&#xff1a; 副本数 容器的重启策略 镜像拉取策略 pod出现故障时的重启等等 Pod控制器的类型 1、 replicaSet&#xff1a;指…
阅读更多...
干货速递｜用需求在环仿真扩展基于模型的系统工程实践：起落架系统案例

干货速递｜用需求在环仿真扩展基于模型的系统工程实践：起落架系统案例

摘要 仿真已经成为大多数行业大规模采用基于模型的系统工程&#xff08;MBSE&#xff09;和基于模型的设计&#xff08;MBD&#xff09;工具的至关重要的因素。与此同时&#xff0c;实用的需求工程工具在以文档需求规格为主的生命周期管理之外并未得到显著发展&#xff0c;这使…
阅读更多...
最新文章

Copyright @ 2022~2023