目录:
rich-text标签 icon标签 switch标签
最后一篇常用标签
富文本标签。可以将HTML代码转换为小程序代码显示。
支持的HTML标签:https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
该标签通过nodes
属性将HTML代码转为小程序页面显示。
如:
<rich-text nodes="<div>这是html代码</div>"></rich-text>
nodes
的值可以是数组也可以是字符串,当值为数组时需要在js
文件data
中定义,由于之前没有写到js文件,所以这里数组形式后面在写js文件时再举例说明。
用于显示小程序内置的图标,如成功、提示、警告等图标。
图标显示的类型使用type
属性指定,size
属性指定图标的大小,color
属性指定图标的颜色。
图标类型的有效值:
类型 | 描述 |
---|---|
success | 成功 |
info | 提示 |
warn | 警告 |
waiting | 等待 |
success_no_circl | 多选空间图标_已选择 |
circle | 多选控件图标_未选择 |
download | 下载 |
cancel | 叉号 |
search | 放大镜 |
如:
<icon class="icon-box-img" type="success" size="93"></icon>
开关选择器,是一个小开关。
常用的属性:
checked
属性来控制它是否被选中,Boolean类型的值。
disbled
属性来控制它是否被禁用。
type
属性来控制它的类型,有效值:switch
, checkbox
。
color
属性来控制它被选中时的颜色,默认为绿色。
bindchange
属性指定checked
状态改变时触发的事件。
如:
<switch checked="true" bindchange="switchChange"/>
其中switchChange
为触发的事件,该事件在js文件中定义。
进度条标签。通过属性来指定和更新当前进度百分比。
常用属性:
percent
属性指定当前进度条百分比进度,值为1-100
。
show-info
属性指定是否在右侧显示百分比,值为Boolean类型。
border-radius
属性指定进度条的四角圆滑程度。
font-size
属性指定右侧字体的大小。
stroke-width
属性指定进度条的宽度。
activeColor
指定已加载部分进度条的颜色。
backgroundColor
属性指定未加载部分进度条的颜色。
更多属性:https://developers.weixin.qq.com/miniprogram/dev/component/progress.html
如:
<progress percent="20" show-info stroke-width="3"/>