图标icon
type 有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clearsize 默认23pxcolor 同css的color
<!--成功图标-->
<icon type="success" size="40"/>
<!--安全成功标志图标-->
<icon type="safe_success" size="40"/>
<!--提示信息图标-->
<icon type="info" size="40"/>
<!--带圆的信息提示图标-->
<icon type="info_circle" size="40"/>
<!--不带圆的成功图标-->
<icon type="success_no_circle" size="40"/>
<!--带圆的成功图标-->
<icon type="success_circle" size="40"/>
<!--警告图标-->
<icon type="warn" size="40"/>
<!--带圆的等待图标-->
<icon type="waiting_circle" size="40"/>
<!--等待图标-->
<icon type="waiting" size="40"/>
<!--下载图标-->
<icon type="download" size="40"/>
<!--取消图标-->
<icon type="cancel" size="40"/>
<!--清除图标-->
<icon type="clear" size="40"/>
<!--改变颜色的success-->
<icon type="success" size="40" color="red"/>
进度条percent Float 无 百分比0~100show-info Boolean false 在进度条右侧显示百分比stroke-width Number 6 进度条线的宽度,单位pxcolor Color #09BB07 进度条颜色active Boolean false 进度条从左往右的动画
<progress percent="80" show-info="true" stroke- color="red" active="true"/>
按钮button
<button type="defaule" bindtap="clickButton">Defalut</button>
<!--原始颜色,不可点击状态, 正在加载状态-->
<button type="primary" disabled="true" loading="true">Primary</button>
<button type="warn">warn</button>
注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
按钮点击事件
clickButton: function(e) {
console.log(e);
},
CHECKBOX
<!--checkbox-group是checkbox的组,使用bindchange,监听数据选中和取消-->
<checkbox-group bindchange="listenCheckboxChange">
<label style="display: flex;" wx:for-items="{{items}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</checkbox-group>
绑定事件绑定数据
items: [
{
name: 'S',
value: 'S',
checked: 'true'
},
{
name: 'O',
value: 'O'
},
{
name: 'N',
value: 'N'
},
{
name: 'G',
value: 'G'
},
{
name: 'SONG',
value: 'SONG'
}
]
绑定监听事件
listenCheckboxChange:function(e) {
console.log(e);
},
至此页面
源代码(Git):https://github.com/yz-mengxiangsong/wechatDemo.git