一、button 按钮
![五： 表单标签（1）]()
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"时，没有点击态效果
|
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----*/ |
二、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事件，携带数据为：\n', e.detail.value)
},
formReset: function() {
console.log('form发生了reset事件')
}
})/* ---page/test/test.js----*/ |