小程序组件(基础组件)

18 篇文章 0 订阅
8 篇文章 0 订阅

icon(图标)

组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

属性类型默认值必填说明最低版本
typestringicon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear1.0.0
sizenumber/string23icon的大小1.0.0
colorstringicon的颜色,同css的color1.0.0

progress(进度条)

属性类型默认值必填说明最低版本
percentnumber百分比0~1001.0.0
show-infobooleanfalse在进度条右侧显示百分比1.0.0
border-radiusnumber/string0圆角大小2.3.1
font-sizenumber/string16右侧百分比字体大小2.3.1
stroke-widthnumber/string6进度条线的宽度1.0.0
colorstring#09BB07进度条颜色(请使用activeColor)1.0.0
activeColorstring#09BB07已选择的进度条的颜色1.0.0
backgroundColorstring#EBEBEB未选择的进度条的颜色1.0.0
activebooleanfalse进度条从左往右的动画1.0.0
active-modestringbackwardsbackwards: 动画从头播;forwards:动画从上次结束点接着播1.7.0
durationnumber30进度增加1%所需毫秒数2.8.2
bindactiveendeventhandle动画完成事件2.4.1

rich-text(富文本显示)

属性类型默认值必填说明最低版本
nodesarray/string[]节点列表/HTML String1.4.0
spacestring显示连续空格2.4.1

space 的合法值

说明
ensp中文字符空格一半大小
emsp中文字符空格大小
nbsp根据字体设置的空格大小

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、bdo(dir)、big、blockquote、br、caption | 、center、cite、code、col(span,width)、colgroup(span,width)、dd、del、div、dl、d、em、fieldset、font、foote、h1、h2、h3、h4、h5、h6、header、hr、i | 、img(alt,src,height,width)、ins、label、legend、li、mark、nav、ol(start,type)、p、pre、q、rt、ruby、s、section、small、span、strong、sub、sup、table(width)、tbody、td(colspan,height,rowspan,width)、tfoot、th(colspan,height,rowspan,width)、thead、tr(colspan,height,rowspan,width)、tt | 、u、ul

Ps:
1、nodes 不推荐使用 String 类型,性能会有所下降。
2、rich-text 组件内屏蔽所有节点的事件。
3、attrs 属性不支持 id ,支持 class 。
4、name 属性大小写不敏感。
5、如果使用了不受信任的HTML节点,该节点及其所有子节点将会被移除。
6、img 标签仅支持网络图片。
7、如果在自定义组件中使用 rich-text 组件,那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。
示例代码

text(文本)

属性类型默认值必填说明最低版本
selectablebooleanfalse文本是否可选1.1.0
spacestring显示连续空格1.4.0
decodebooleanfalse是否解码1.4.0

space 的合法值

说明
ensp中文字符空格一半大小
emsp中文字符空格大小
nbsp根据字体设置的空格大小

Ps:
1、decode可以解析的有   < > & '    
2、各个操作系统的空格标准并不一致。
3、text 组件内只支持 text 嵌套。
4、除了文本节点以外的其他节点都无法长按选中。
5、bug, 基础库版本低于 2.1.0 时, text 组件内嵌的 text style 设置可能不会生效。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值