|
组件说明:
表单，将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。
当点击 <form/> 表单中 formType 为 submit 的<button/> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
组件用法：
重置:<button formType="reset">Reset</button>
提交: <button formType="submit">Submit</button>
wxml
-
-
<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="JavaScript"/>JavaScript</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="PHP"/>PHP</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
-
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
-
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,Helvetica Neue,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: 1px solid #CCCCCC;
-
}
-
.page__desc{
-
display: none;
-
margin-top: 20rpx;
-
font-size: 26rpx;
-
color: #BBBBBB;
-
}
-
.section{
-
margin-bottom: 80rpx;
-
}
-
.section_gap{
-
padding: 0 30rpx;
-
}
-
.section__title{
-
margin-bottom: 16rpx;
-
padding-left: 30rpx;
-
padding-right: 30rpx;
-
}
-
.section_gap .section__title{
-
padding-left: 0;
-
padding-right: 0;
-
}
-
.btn-area{
-
padding: 0 30px;
-
}
-
.btn-area button{
-
margin-top: 20rpx;
-
margin-bottom: 20rpx;
-
}
-
.page input{
-
padding: 20rpx 30rpx;
-
background-color: #fff;
-
margin-left: 20rpx;
-
}
主要属性：
|
属性
|
类型
|
说明
|
|
report-submit
|
Boolean
|
是否返回formId用于发送模板消息
|
|
bindsubmit
|
EventHandle
|
携带form中的数据触发submit事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}
|
注意：
本案例使用的modal组件即将过期，推荐使用wx.showModal API
将formSubmit方法改写成这样，就可以。目前wx.showModal这个API的content不支持换行，有可能是Bug，期待后续优化。
-
-
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('用户点击确定')
-
}
-
}
-
});
-
},
|
