一 icon
图标。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | String | icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear | |
size | Number / String | 23px | icon的大小,单位px(2.4.0起支持rpx) |
color | Color | icon的颜色,同css的color | |
aria-label | String | 无障碍访问,(属性)元素的额外描述 2.5.0 |
示例:
<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'
]
}
})
二 text
文本。
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
selectable | Boolean | false | 文本是否可选 | 1.1.0 |
space | String | false | 显示连续空格 | 1.4.0 |
decode | Boolean | false | 是否解码 | 1.4.0 |
space 有效值:
值 | 说明 |
---|---|
ensp | 中文字符空格一半大小 |
emsp | 中文字符空格大小 |
nbsp | 根据字体设置的空格大小 |
Tips
- decode可以解析的有
<
>
&
'
 
 
- 各个操作系统的空格标准并不一致。
<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')
})
}
}
})
Bug & Tip
三 progress
进度条。
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
percent | Float | 无 | 百分比0~100 | |
show-info | Boolean | false | 在进度条右侧显示百分比 | |
border-radius | Number / String | 0 | 圆角大小,单位px(2.4.0起支持rpx) | 2.3.1 |
font-size | Number / String | 16 | 右侧百分比字体大小,单位px(2.4.0起支持rpx) | 2.3.1 |
stroke-width | Number / String | 6 | 进度条线的宽度,单位px(2.4.0起支持rpx) | |
color | Color | #09BB07 | 进度条颜色 (请使用 activeColor) | |
activeColor | Color | 已选择的进度条的颜色 | ||
backgroundColor | Color | 未选择的进度条的颜色 | ||
active | Boolean | false | 进度条从左往右的动画 | |
active-mode | String | backwards | backwards: 动画从头播;forwards:动画从上次结束点接着播 | 1.7.0 |
bindactiveend | EventHandle | 动画完成事件 | 2.4.1 | |
aria-label | String | 无障碍访问,(属性)元素的额外描述 | 2.5.0 |
示例:
<progress percent="20" show-info />
<progress percent="40" stroke-width="12" />
<progress percent="60" color="pink" />
<progress percent="80" active />