icon
功能说明:图标组件。
参数及说明:
属性 | 类型 | 默认值 | 说明 |
type | string | - | icon 的类型,有效值:success,success_no_circle,info,warn,waiting,cancel,download,search,clear |
size | umber / string | 23 | icon 的大小,单位默认为 px |
color | string | - | icon 的颜色,同 css 的 color |
aria-label | string | - | 无障碍访问,(属性)元素的额外描述 |
示例代码:
对应的 WXML 文件
<view class="group"><block wx.for="{{iconSize}}"><icon type="success" size="{{item}}" /></block></view><view class="group"><block wx.for="{{iconType}}"><icon type="{{item}}" size="40" /></block></view><view class="group"><block wx.for="{{iconColor}}"><icon type="success" size="40" color="{{item}}" /></block></view>
对应的 js 文件
Page({data: {iconSize: [20, 30, 40, 50, 60, 70],iconColor: ['red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'],iconType: ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear']}})
![](https://qcloudimg.tencent-cloud.cn/image/document/76e4d653717a805d0174cf4ba3a5bed4.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/76e4d653717a805d0174cf4ba3a5bed4.png)
progress
功能说明:进度条。
参数及说明:
属性 | 类型 | 默认值 | 说明 |
percent | float | 无 | 百分比0~100 |
show-info | boolean | false | 在进度条右侧显示百分比 |
border-radius | number / string | 0 | 圆角大小,单位:px |
font-size | number / string | 16 | 右侧百分比字体大小,单位:px |
stroke-width | number / string | 6 | 进度条线的宽度 |
color | color | #09BB07 | 进度条颜色(请使用 activeColor) |
activeColor | color | - | 已选择的进度条的颜色 |
backgroundColor | color | - | 未选择的进度条的颜色 |
active | boolean | false | 进度条从左往右的动画 |
active-mode | string | backwards | backwards:动画从头播 forwards:动画从上次结束点接着播 |
bindactiveend | eventhandle | - | 动画完成事件 |
aria-label | string | - | 无障碍访问,(属性)元素的额外描述 |
示例代码:
<progress percent="20" show-info /><progress percent="40" stroke-width="12" /><progress percent="60" color="blue" /><progress percent="80" active />
![](https://qcloudimg.tencent-cloud.cn/image/document/541ff5fcd5b1803ba9c078e4dc74de9b.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/541ff5fcd5b1803ba9c078e4dc74de9b.png)
text
功能说明:文本。
参数及说明:
属性 | 类型 | 默认值 | 说明 |
selectable | boolean | false | 文本是否可选 |
space | string | - | 显示连续空格 |
decode | boolean | false | 是否解码 |
值 | 说明 |
ensp | 中文字符空格一半大小 |
emsp | 中文字符空格大小 |
nbsp | 根据字体设置的空格大小 |
说明:
decode
可以解析的有
<
>
&
'
 
&emsp
。各个操作系统的空格标准并不一致。
<text>
组件内只支持 <text>
嵌套。除了文本节点以外的其他节点都无法长按选中。
对应的 WXML 文件
<view class="btn-area"><view class="body-view"><text>{{text}}</text><button bindtap="add">add line</button><button bindtap="remove">remove line</button></view></view>
对应的 js 文件
const initData = 'this is first line\\nthis is second line'const extraLine = []Page({data: {text: initData},add(e) {extraLine.push('other line')this.setData({text: initData + '\\n' + extraLine.join('\\n')})},remove(e) {if (extraLine.length > 0) {extraLine.pop()this.setData({text: initData + '\\n' + extraLine.join('\\n')})}}})
![](https://qcloudimg.tencent-cloud.cn/image/document/d774ed29b81e8618c9c2291571edc0ba.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/d774ed29b81e8618c9c2291571edc0ba.png)
rich-text
功能说明:富文本。
参数及说明:
属性 | 类型 | 默认值 | 说明 |
nodes | array / string | - | 节点列表 / HTML String |
space | string | - | 显示连续空格 |
space有效值:
值 | 说明 |
ensp | 中文字符空格一半大小 |
emsp | 中文字符空格大小 |
nbsp | 根据字体设置空格大小 |
支持默认事件,包括:
tap
、touchstart
、touchmove
、touchcancel
、touchend
和longtap
。nodes
nodes 属性推荐使用 Array 类型,由于组件会将 String 类型转换为 Array 类型,因而性能会有所下降。现支持两种节点,通过 type 来区分,分别是元素节点和文本节点,默认是元素节点,在富文本区域里显示的 HTML 节点。
元素节点:type = node
属性 | 说明 | 类型 | 必填 | 备注 |
name | 标签名 | string | 是 | 支持部分受信任的 HTML 节点 |
attrs | 属性 | object | 否 | 支持部分收信人的属性,遵循 Pascal 命名法 |
children | 子节点列表 | array | 否 | 结构和 nodes 一致 |
文本节点:type=text
属性 | 说明 | 类型 | 必填 | 备注 |
text | 文本 | string | 是 | 支持 entities |
受信任的 HTML 节点及属性
全局支持 class 和 style 属性,不支持 id 属性。
节点 | 属性 | 节点 | 属性 |
a | - | img | alt,src,height,width |
abbr | - | ins | - |
b | - | label | - |
br | - | legend | - |
code | - | li | - |
col | span,width | ol | start,type |
colgroup | span,width | p | - |
dd | - | q | - |
del | - | span | - |
div | - | strong | - |
dl | - | sub | - |
dt | - | sup | - |
em | - | table | width |
fieldset | - | tbody | - |
h1 | - | td | colspan,height,rowspan,width |
h2 | - | tfoot | - |
h3 | - | th | colspan,height,rowspan,width |
h4 | - | thead | - |
h5 | - | tr | - |
h6 | - | ul | - |
hr | - | - | - |
示例代码
<!-- rich-text.wxml --><rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
// rich-text.jsPage({data: {nodes: [{name: 'div',attrs: {class: 'div_class',style: 'line-height: 60px; color: red;'},children: [{type: 'text',text: 'Hello World!'}]}]},tap() {console.log('tap')}})
说明:
nodes 不推荐使用 String 类型,性能会有所下降。
rich-text 组件内屏蔽所有节点的事件。
attrs 属性不支持 id,支持 class。
name 属性大小写不敏感。
如果使用了不受信任的 HTML 节点,该节点及其所有子节点将会被移除。
img 标签仅支持网络图片。
如果在自定义组件中使用 rich-text 组件,那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。
nodes
不推荐使用 String 类型,性能会有所下降。