图标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

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。