属性 | 类型 | 默认值 | 说明 |
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 | - | 无障碍访问,(属性)元素的额外描述 |
<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>
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']}})
属性 | 类型 | 默认值 | 说明 |
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 />
属性 | 类型 | 默认值 | 说明 |
selectable | boolean | false | 文本是否可选 |
space | string | - | 显示连续空格 |
decode | boolean | false | 是否解码 |
值 | 说明 |
ensp | 中文字符空格一半大小 |
emsp | 中文字符空格大小 |
nbsp | 根据字体设置的空格大小 |
decode
可以解析的有
<
>
&
'
 
&emsp
。<text>
组件内只支持 <text>
嵌套。<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>
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')})}}})
属性 | 类型 | 默认值 | 说明 |
nodes | array / string | - | 节点列表 / HTML String |
space | string | - | 显示连续空格 |
值 | 说明 |
ensp | 中文字符空格一半大小 |
emsp | 中文字符空格大小 |
nbsp | 根据字体设置空格大小 |
tap
、touchstart
、touchmove
、touchcancel
、touchend
和longtap
。属性 | 说明 | 类型 | 必填 | 备注 |
name | 标签名 | string | 是 | 支持部分受信任的 HTML 节点 |
attrs | 属性 | object | 否 | 支持部分收信人的属性,遵循 Pascal 命名法 |
children | 子节点列表 | array | 否 | 结构和 nodes 一致 |
属性 | 说明 | 类型 | 必填 | 备注 |
text | 文本 | string | 是 | 支持 entities |
节点 | 属性 | 节点 | 属性 |
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 类型,性能会有所下降。
本页内容是否解决了您的问题?