基础内容

最近更新时间:2024-05-11 17:21:31

我的收藏

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'
]
}
})




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 />




text

功能说明:文本。
参数及说明:
属性
类型
默认值
说明
selectable
boolean
false
文本是否可选
space
string
-
显示连续空格
decode
boolean
false
是否解码
说明
ensp
中文字符空格一半大小
emsp
中文字符空格大小
nbsp
根据字体设置的空格大小
说明:
decode可以解析的有 &nbsp;  &lt;  &gt;  &amp;  &apos;  &ensp;  &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')
})
}
}
})




rich-text

功能说明:富文本。
参数及说明:
属性
类型
默认值
说明
nodes
array / string
-
节点列表 / HTML String
space
string
-
显示连续空格
space有效值:
说明
ensp
中文字符空格一半大小
emsp
中文字符空格大小
nbsp
根据字体设置空格大小
支持默认事件,包括:taptouchstarttouchmovetouchcanceltouchendlongtap
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.js
Page({
data: {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text',
text: 'Hello&nbsp;World!'
}]
}]
},
tap() {
console.log('tap')
}
})
说明:
nodes 不推荐使用 String 类型,性能会有所下降。
 rich-text 组件内屏蔽所有节点的事件。
attrs 属性不支持 id,支持 class。
name 属性大小写不敏感。
如果使用了不受信任的 HTML 节点,该节点及其所有子节点将会被移除。
img 标签仅支持网络图片。
如果在自定义组件中使用 rich-text 组件,那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。nodes不推荐使用 String 类型,性能会有所下降。