一、button 按钮
![]()
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
/* ---page/test/test.wxml----*/<button size="default">default</button><button size="mini" type="default">mini 默认</button><button size="mini" type="primary">mini 绿色</button><button size="mini" type="warn">mini 红色</button><button size="mini" type="warn" disabled="true" >mini 禁用</button><button size="mini" plain="true" >背景色透明</button><button size="mini" loading="true" >加载中</button><button hover-class="abc" >点击时使用abc样式</button>/* ---page/test/test.wxml----*/ |
| size | String | default | 有效值default, mini |
| type | String | default | 按钮的样式类型，有效值primary, default, warn |
| plain | Boolean | false | 按钮是否镂空，背景色透明 |
| disabled | Boolean | false | 是否禁用 |
| loading | Boolean | false | 名称前是否带 loading 图标 |
| formType | String | 无 | 有效值：submit, reset，用于form组件，点击分别会触发submit/reset事件 |
| hover-class | String | button-hover | 指定按钮按下去的样式类。当hover-class="none"时，没有点击态效果 |
二、checkbox 多选
|
1
2
3
4
5
6
7
8
9
10
|
/* ---page/test/test.wxml----*/<checkbox-group bindchange="checkboxChange"> <label class="checkbox" wx:for-items="{{items}}"> <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} </label></checkbox-group>/* ---page/test/test.wxml----*/ |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
/* ---page/test/test.js----*/Page({ data: { items: [ {name: 'USA', value: '美国'}, {name: 'CHN', value: '中国', checked: 'true'}, {name: 'BRA', value: '巴西'}, {name: 'JPN', value: '日本'}, {name: 'ENG', value: '英国'}, {name: 'TUR', value: '法国'}, ] }, checkboxChange: function(e) { console.log('checkbox发生change事件，携带value值为：', e.detail.value) }})/* ---page/test/test.js----*/ |
checkbox-group：
| bindchange | EventHandle |
|
checkbox-group中选中项发生改变是触发change事件，detail = {value:[选中的checkbox的value的数组]} |
| alue | String |
|
checkbox标识，选中时触发checkbox-group的change事件，并携带checkbox的value |
| disabled | Boolean | false | 是否禁用 |
| checked | Boolean | false | 当前是否选中，可用来设置默认选中 |
三、form 表单
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
/* ---page/test/test.wxml----*/
<form bindsubmit="formSubmit" bindreset="formReset"> <view class="section section_gap"> <view class="section__title">switch</view> <switch name="switch"/> </view> <view class="section section_gap"> <view class="section__title">slider</view> <slider name="slider" show-value ></slider> </view> <view class="section"> <view class="section__title">input</view> <input name="input" placeholder="please input here" /> </view> <view class="section section_gap"> <view class="section__title">radio</view> <radio-group name="radio-group"> <label><radio value="radio1"/>radio1</label> <label><radio value="radio2"/>radio2</label> </radio-group> </view> <view class="section section_gap"> <view class="section__title">checkbox</view> <checkbox-group name="checkbox"> <label><checkbox value="checkbox1"/>checkbox1</label> <label><checkbox value="checkbox2"/>checkbox2</label> </checkbox-group> </view> <view class="btn-area"> <button formType="submit">Submit</button> <button formType="reset">Reset</button> </view></form>/* ---page/test/test.wxml----*/ |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
/* ---page/test/test.js----*/Page({ formSubmit: function(e) { console.log('form发生了submit事件，携带数据为：
', e.detail.value) }, formReset: function() { console.log('form发生了reset事件') }})/* ---page/test/test.js----*/ |