欢迎光临,了解微信小程序开发,就上易用通! QQ登录

小程序极速实战开发《九》form表单

发布:2018-01-25 16:34浏览:来源:网络 编辑:程小序

组件说明:
表单,将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。
当点击 <form/> 表单中 formType 为 submit 的<button/> 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。
 
组件用法:
重置:<button formType="reset">Reset</button>
 
 
 
 
提交: <button formType="submit">Submit</button>
 
 
 
wxml
 
    1. <view class="page">
    2.   <view class="page__hd">
    3.     <text class="page__title">表单控件</text>
    4.   </view>
    5.   <form class="page__bd" catchsubmit="formSubmit" catchreset="formReset">
    6.     <view class="section">
    7.       <view class="section__title">您的姓名:</view>
    8.       <input name="name" placeholder="姓名:" />
    9.     </view>
    10.     <view class="section section_gap">
    11.       <view class="section__title">性别:</view>
    12.       <radio-group name="gender">
    13.         <label><radio value="男"/>男</label>
    14.         <label><radio value="女"/>女</label>
    15.         <label><radio value="其他"/>其他</label>
    16.       </radio-group>
    17.     </view>
    18.     <view class="section section_gap">
    19.       <view class="section__title">年龄:</view>
    20.       <slider value="18" name="age" show-value ></slider>
    21.     </view>
    22.     <view class="section section_gap">
    23.       <view class="section__title">擅长的开发语言:</view>
    24.       <checkbox-group name="technology">
    25.         <label><checkbox value="Java"/>Java</label>
    26.         <label><checkbox value="JavaScript"/>JavaScript</label>
    27.         <label><checkbox value="C++"/>C++</label>
    28.         <label><checkbox value="C"/>C</label>
    29.         <label><checkbox value="Object-C"/>Object-C</label>
    30.         <label><checkbox value="C#"/>C#</label>
    31.         <label><checkbox value="Python"/>Python</label>
    32.         <label><checkbox value="PHP"/>PHP</label>
    33.         <label><checkbox value="Ruby"/>Ruby</label>
    34.         <label><checkbox value="Swift"/>Swift</label>
    35.       </checkbox-group>
    36.     </view>
    37.     <view class="section section_gap">
    38.       <view class="section__title">是否公开信息:</view>
    39.       <switch name="isPublic"/>
    40.     </view>
    41.     <view class="btn-area">
    42.       <button formType="submit">Submit</button>
    43.       <button formType="reset">Reset</button>
    44.     </view>
    45.     <modal class="modal" hidden="{{modalHidden}}" no-cancel bindconfirm="modalChange">
    46.       <view> 您填写的表单如下 </view>
    47.       <view> 姓名:{{name}} </view>
    48.       <view> 性别:{{gender}} </view>
    49.       <view> 年龄:{{age}} </view>
    50.       <view> 擅长的开发语言:{{technology}} </view>
    51.       <view> 是否公开信息:{{isPublic}} </view>
    52.     </modal>
    53.   </form>
    54. </view>
js


  1. Page({
  2.   data: {
  3.     pickerHidden: true,
  4.     chosen: '',
  5.     modalHidden: true,
  6.     name: '',
  7.     gender: '',
  8.     age: '',
  9.     technology: '',
  10.     isPublic: ''
  11.   },
  12.   formSubmit: function(e) {
  13.     var value =  e.detail.value;
  14.     this.setData(
  15.       {
  16.         modalHidden: false,
  17.         name: value.name,
  18.         gender: value.gender,
  19.         age: value.age,
  20.         technology: value.technology,
  21.         isPublic: value.isPublic
  22.       }
  23.     );
  24.     console.log('form发生了submit事件,携带数据为:', e.detail.value)
  25.   },
  26.   formReset: function(e) {
  27.     console.log('form发生了reset事件,携带数据为:', e.detail.value)
  28.     this.setData({
  29.       chosen: ''
  30.     })
  31.   },
  32.   modalChange: function(e) {
  33.     this.setData({
  34.       modalHidden: true
  35.     })
  36.   },
  37. })


wxss

  1. wx-label {
  2.   display: block;
  3.   margin-top: 10rpx;
  4.   margin-left: 15rpx;
  5. }
  6. .section__title{
  7.   font-size: 30rpx;
  8.   margin-bottom: 30rpx;
  9.   font-weight: bold;
  10. }
  11. .page {
  12.     min-height: 100%;
  13.     flex: 1;
  14.     background-color: #FBF9FE;
  15.     font-size: 32rpx;
  16.     font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
  17.     overflow: hidden;
  18. }
  19. .page__hd{
  20.     padding: 50rpx 50rpx 100rpx 50rpx;
  21.     text-align: center;
  22. }
  23. .page__title{
  24.     display: inline-block;
  25.     padding: 20rpx 40rpx;
  26.     font-size: 32rpx;
  27.     color: #AAAAAA;
  28.     border-bottom: 1px solid #CCCCCC;
  29. }
  30. .page__desc{
  31.     display: none;
  32.     margin-top: 20rpx;
  33.     font-size: 26rpx;
  34.     color: #BBBBBB;
  35. }
  36. .section{
  37.     margin-bottom: 80rpx;
  38. }
  39. .section_gap{
  40.     padding: 0 30rpx;
  41. }
  42. .section__title{
  43.     margin-bottom: 16rpx;
  44.     padding-left: 30rpx;
  45.     padding-right: 30rpx;
  46. }
  47. .section_gap .section__title{
  48.     padding-left: 0;
  49.     padding-right: 0;
  50. }
  51. .btn-area{
  52.     padding: 0 30px;
  53. }
  54. .btn-area button{
  55.     margin-top: 20rpx;
  56.     margin-bottom: 20rpx;
  57. }
  58. .page input{
  59.     padding: 20rpx 30rpx;
  60.     background-color: #fff;
  61.     margin-left: 20rpx;
  62. }


主要属性:
属性
类型
说明
report-submit
Boolean
是否返回formId用于发送模板消息
bindsubmit
EventHandle
携带form中的数据触发submit事件,event.detail = {value : {‘name’: ‘value’} , formId: ‘’}

注意:
本案例使用的modal组件即将过期,推荐使用wx.showModal API
将formSubmit方法改写成这样,就可以。目前wx.showModal这个API的content不支持换行,有可能是Bug,期待后续优化。
 
    1. formSubmit: function(e) {
    2.     var value =  e.detail.value;
    3.     wx.showModal({
    4.       title: '您填写的表单如下',
    5.       content: '姓名:'+value.name
    6.               +'性别:'+value.gender
    7.               +'年龄:'+value.age
    8.               +'擅长的开发语言:'+value.technology
    9.               +'是否公开信息:' + value.isPublic,
    10.       showCancel: false,
    11.       success: function(res) {
    12.         if (res.confirm) {
    13.           console.log('用户点击确定')
    14.         }
    15.       }
    16.     });
    17.   },





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。

在线客服1:
点击这里给我发消息

在线客服2:
点击这里给我发消息

商务客服:
点击这里给我发消息

服务时间:
9:00-18:00(工作日)