微信小程序组件解读和分析:九form表单
Posted 微信开发--51小程序
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序组件解读和分析:九form表单相关的知识,希望对你有一定的参考价值。
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
|
< view class = "page" > < view class = "page__hd" > < text class = "page__title" >表单控件</ text > </ view > < form class = "page__bd" catchsubmit = "formSubmit" catchreset = "formReset" > < view class = "section" > < view class = "section__title" >您的姓名:</ view > < input name = "name" placeholder = "姓名:" /> </ view > < view class = "section section_gap" > < view class = "section__title" >性别:</ view > < radio-group name = "gender" > < label >< radio value = "男" />男</ label > < label >< radio value = "女" />女</ label > < label >< radio value = "其他" />其他</ label > </ radio-group > </ view > < view class = "section section_gap" > < view class = "section__title" >年龄:</ view > < slider value = "18" name = "age" show-value ></ slider > </ view > < view class = "section section_gap" > < view class = "section__title" >擅长的开发语言:</ view > < checkbox-group name = "technology" > < label >< checkbox value = "Java" />Java</ label > < label >< checkbox value = "C++" />C++</ label > < label >< checkbox value = "C" />C</ label > < label >< checkbox value = "Object-C" />Object-C</ label > < label >< checkbox value = "C#" />C#</ label > < label >< checkbox value = "Python" />;Python</ label > < label >< checkbox value = "Ruby" />Ruby</ label > < label >< checkbox value = "Swift" />Swift</ label > </ checkbox-group > </ view > < view class = "section section_gap" > < view class = "section__title" >是否公开信息:</ view > < switch name = "isPublic" /> </ view > < view class = "btn-area" > < button formType = "submit" >Submit</ button > < button formType = "reset" >Reset</ button > </ view > < modal class = "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) { var value = 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 : 10 rpx; margin-left : 15 rpx; } .section__title{ font-size : 30 rpx; margin-bottom : 30 rpx; font-weight : bold ; } .page { min-height : 100% ; flex: 1 ; background-color : #FBF9FE ; font-size : 32 rpx; font-family : -apple-system-font, Helvetica Neue, Helvetica , sans-serif ; overflow : hidden ; } .page__hd{ padding : 50 rpx 50 rpx 100 rpx 50 rpx; text-align : center ; } .page__title{ display : inline- block ; padding : 20 rpx 40 rpx; font-size : 32 rpx; color : #AAAAAA ; border-bottom : 1px solid #CCCCCC ; } .page__desc{ display : none ; margin-top : 20 rpx; font-size : 26 rpx; color : #BBBBBB ; } .section{ margin-bottom : 80 rpx; } .section_gap{ padding : 0 30 rpx; } .section__title{ margin-bottom : 16 rpx; padding-left : 30 rpx; padding-right : 30 rpx; } .section_gap .section__title{ padding-left : 0 ; padding-right : 0 ; } .btn-area{ padding : 0 30px ; } .btn-area button{ margin-top : 20 rpx; margin-bottom : 20 rpx; } .page input{ padding : 20 rpx 30 rpx; background-color : #fff ; margin-left : 20 rpx; } |
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) { var value = 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( ‘用户点击确定‘ ) } } }); }, |
以上是关于微信小程序组件解读和分析:九form表单的主要内容,如果未能解决你的问题,请参考以下文章