微信小程序分享8：checkbox & icon

还是新建一个quick start项目，导入昨天的demo7，新建checkbox目录、checkbox.wxml、checkbox.js，并修改app.json主页为checkbox。

1，复选框

checkbox.wxml：

<checkbox-group bindchange="checkboxChange"> <view class="flex-wrp" style="height: 300px;flex-direction:column;"> <label class="checkbox" wx:for="{{items}}"> <view style="padding:.5rem 1rem;"> <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}</view> </label> </view> </checkbox-group>

checkbox-group是一个组，例如让用户选择一群标签时，适合使用这个组件。checkbox有两个属性：

• value是选择之后的值
• checked，是否选择

checkbox.js：

Page({ data: { items: [ {name: 'USA', value: '美国'}, {name: 'CHN', value: '中国', checked: true}, {name: 'BRA', value: '巴西', checked: 1}, {name: 'JPN', value: '日本'}, {name: 'ENG', value: '英国'}, {name: 'TUR', value: '法国'}, ] }, checkboxChange: function(e) { console.log('checkbox发生change事件，携带value值为：', e.detail.value) } })

checked布尔值，如果写作true，1，还是文本的“true”都是一样的效果，因为非空字符串，非零数字都会转会true。

2，icon图标

icon是微信预定义的一些图标，矢量，大小可变，原理就是制成了字体内嵌在了程序中，所以颜色也是可控的。

<view style="padding:1rem;height: 300px;flex-direction:column;"> <view style="display:flex;"> <icon type="success" size="25" /> <icon type="success_circle" size="25" /> <icon type="success_no_circle" size="25" /> <icon type="info" size="25" /> <icon type="info_circle" size="25" /> <icon type="warn" size="25" /> <icon type="safe_warn" size="25" /> <icon type="" size="25" /> </view> </view>

但并不是所有的success，warn，info都具有_circle、_no_circle等变体，只有下面列出的类型是可用的：

'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn', 'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download', 'info_circle', 'cancel', 'search', 'clear'

size代表大小，单位却是px。