form表單元件說明:
表單,將元件內的使用者輸入的
當點選
表單中formType 為submit 的 元件時,會將表單元件中的value 值提交,需要在表單元件中加上name 來作為key。form表單元件用法:
重設:
##form表單元件範例程式碼執行效果如下:
<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>###下面是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; }###form表單的主要屬性:######### #######注意:######本案例使用的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('用户点击确定') } } }); },##########
以上是微信小程式元件form表單解讀與分析介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!