还是新建一个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有两个属性:
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。