form表单组件说明:
表单，将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。
当点击 <form/> 表单中 formType 为 submit 的<button/> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
form表单组件用法：
重置:<button formType=”reset”>Reset</button>
form表单组件示例代码运行效果如下：
提交: <button formType=”submit”>Submit</button>
下面是WXML代码：
[XML]
纯文本查看 复制代码
纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<viewclass="page">
<viewclass="page__hd">
<textclass="page__title">表单控件</text>
</view>
<formclass="page__bd"catchsubmit="formSubmit"catchreset="formReset">
<viewclass="section">
<viewclass="section__title">您的姓名：</view>
<inputname="name"placeholder="姓名："/>
</view>
<viewclass="section section_gap">
<viewclass="section__title">性别：</view>
<radio-groupname="gender">
<label><radiovalue="男"/>男</label>
<label><radiovalue="女"/>女</label>
<label><radiovalue="其他"/>其他</label>
</radio-group>
</view>
<viewclass="section section_gap">
<viewclass="section__title">年龄：</view>
<slidervalue="18"name="age"show-value ></slider>
</view>
<viewclass="section section_gap">
<viewclass="section__title">擅长的开发语言：</view>
<checkbox-groupname="technology">
<label><checkboxvalue="Java"/>Java</label>
<label><checkboxvalue="JavaScript"/>JavaScript</label>
<label><checkboxvalue="C++"/>C++</label>
<label><checkboxvalue="C"/>C</label>
<label><checkboxvalue="Object-C"/>Object-C</label>
<label><checkboxvalue="C#"/>C#</label>
<label><checkboxvalue="Python"/>;Python</label>
<label><checkboxvalue="PHP"/>;PHP</label>
<label><checkboxvalue="Ruby"/>Ruby</label>
<label><checkboxvalue="Swift"/>Swift</label>
</checkbox-group>
</view>
<viewclass="section section_gap">
<viewclass="section__title">是否公开信息：</view>
<switchname="isPublic"/>
</view>
<viewclass="btn-area">
<buttonformType="submit">Submit</button>
<buttonformType="reset">Reset</button>
</view>
<modalclass="modal"hidden="{{modalHidden}}"no-cancel bindconfirm="modalChange">
<view> 您填写的表单如下 </view>
<view> 姓名:{{name}} </view>
<view> 性别：{{gender}} </view>
<view> 年龄：{{age}} </view>
<view> 擅长的开发语言：{{technology}} </view>
<view> 是否公开信息：{{isPublic}} </view>
</modal>
</form>
</view>
|
下面是JS代码：
[JavaScript]
纯文本查看 复制代码
纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
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
|
Page({
data: {
pickerHidden: true,
chosen: ‘‘,
modalHidden: true,
name: ‘‘,
gender: ‘‘,
age: ‘‘,
technology: ‘‘,
isPublic: ‘‘
},
formSubmit: function(e) {
varvalue = e.detail.value;
this.setData(
{
modalHidden: false,
name: value.name,
gender: value.gender,
age: value.age,
technology: value.technology,
isPublic: value.isPublic
}
);
console.log(‘form发生了submit事件，携带数据为：‘, e.detail.value)
},
formReset: function(e) {
console.log(‘form发生了reset事件，携带数据为：‘, e.detail.value)
this.setData({
chosen: ‘‘
})
},
modalChange: function(e) {
this.setData({
modalHidden: true
})
},
})
|
下面是WXSS代码：
[CSS]
纯文本查看 复制代码
纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
wx-label {
display: block;
margin-top: 10rpx;
margin-left: 15rpx;
}
.section__title{
font-size: 30rpx;
margin-bottom: 30rpx;
font-weight: bold;
}
.page {
min-height: 100%;
flex: 1;
background-color: #FBF9FE;
font-size: 32rpx;
font-family: -apple-system-font,HelveticaNeue,Helvetica,sans-serif;
overflow: hidden;
}
.page__hd{
padding: 50rpx 50rpx 100rpx 50rpx;
text-align: center;
}
.page__title{
display: inline-block;
padding: 20rpx 40rpx;
font-size: 32rpx;
color: #AAAAAA;
border-bottom: 1pxsolid#CCCCCC;
}
.page__desc{
display: none;
margin-top: 20rpx;
font-size: 26rpx;
color: #BBBBBB;
}
.section{
margin-bottom: 80rpx;
}
.section_gap{
padding: 030rpx;
}
.section__title{
margin-bottom: 16rpx;
padding-left: 30rpx;
padding-right: 30rpx;
}
.section_gap .section__title{
padding-left: 0;
padding-right: 0;
}
.btn-area{
padding: 030px;
}
.btn-area button{
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.page input{
padding: 20rpx 30rpx;
background-color: #fff;
margin-left: 20rpx;
}
|
form表单的主要属性：
|
属性
|
类型
|
说明
|
|
report-submit
|
Boolean
|
是否返回formId用于发送模板消息
|
|
bindsubmit
|
EventHandle
|
携带form中的数据触发submit事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}
|
注意：
本案例使用的modal组件即将过期，推荐使用wx.showModal API
将formSubmit方法改写成这样，就可以。目前wx.showModal这个API的content不支持换行，有可能是Bug，期待后续优化。
[JavaScript]
纯文本查看 复制代码
纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
formSubmit: function(e) {
varvalue = e.detail.value;
wx.showModal({
title: ‘您填写的表单如下‘,
content: ‘姓名:‘+value.name
+‘性别：‘+value.gender
+‘年龄：‘+value.age
+‘擅长的开发语言：‘+value.technology
+‘是否公开信息：‘+ value.isPublic,
showCancel: false,
success: function(res) {
if(res.confirm) {
console.log(‘用户点击确定‘)
}
}
});
},
|
点击查看原文