フォームコンポーネントの説明:
フォーム、
フォーム フォーム コンポーネントの使用法:
リセット:
フォーム フォーム コンポーネントのサンプル コードの実行効果は次のとおりです:
Submit:
以下は 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>
以下は 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; }
主な属性フォーム:
注:
この場合に使用されているモーダルコンポーネントは期限切れになります。このように formSubmit メソッドを書き直すには、wx.showModal API
を使用することをお勧めします。現在、wx.showModal API の内容は改行をサポートしていません。今後の最適化に期待します。
りー以上がWeChat ミニ プログラム コンポーネントのフォーム解釈と分析の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。