微信小程序form表單組件示例代碼
表單,將組件內(nèi)的用戶輸入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。
當(dāng)點(diǎn)擊<form/>表單中 formType 為 submit 的<button/>組件時(shí),會將表單組件中的 value 值進(jìn)行提交,需要在表單組件中加上 name 來作為 key。
| 屬性名 | 類型 | 說明 |
|---|---|---|
| report-submit | Boolean | 是否返回formId用于發(fā)送模板消息 |
| bindsubmit | EventHandle | 攜帶form中的數(shù)據(jù)觸發(fā)submit事件,event.detail = { value : {"name":"value"} , formId:"" } |
| bindreset | EventHandle | 表單重置時(shí)會觸發(fā)reset事件 |
示例代碼:
示例代碼:
<form bindsubmit="formSubmit" bindreset="formReset">
<view class="section section_gap">
<view class="section__title">switch</view>
<switch name="switch"/>
</view>
<view class="section section_gap">
<view class="section__title">slider</view>
<slider name="slider" show-value ></slider>
</view>
<view class="section">
<view class="section__title">input</view>
<input name="input" placeholder="please input here" />
</view>
<view class="section section_gap">
<view class="section__title">radio</view>
<radio-group name="radio-group">
<label><radio value="radio1"/>radio1</label>
<label><radio value="radio2"/>radio2</label>
</radio-group>
</view>
<view class="section section_gap">
<view class="section__title">checkbox</view>
<checkbox-group name="checkbox">
<label><checkbox value="checkbox1"/>checkbox1</label>
<label><checkbox value="checkbox2"/>checkbox2</label>
</checkbox-group>
</view>
<view class="btn-area">
<button formType="submit">Submit</button>
<button formType="reset">Reset</button>
</view>
</form>
Page({
formSubmit: function(e) {
console.log('form發(fā)生了submit事件,攜帶數(shù)據(jù)為:', e.detail.value)
},
formReset: function() {
console.log('form發(fā)生了reset事件')
}
})

總結(jié)
以上所述是小編給大家介紹的微信小程序form表單組件示例代碼,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時(shí)回復(fù)大家的!
相關(guān)文章
創(chuàng)建echart多個(gè)聯(lián)動的示例代碼
這篇文章主要介紹了創(chuàng)建echart多個(gè)聯(lián)動的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
JavaScript中本地存儲(LocalStorage)和會話存儲(SessionStorage)的使用
本地存儲和會話存儲是比較常用的方法,你知道兩者的區(qū)別嗎,本文詳細(xì)的介紹了JavaScript中本地存儲(LocalStorage)和會話存儲(SessionStorage)的使用,具有一定的參考價(jià)值,感興趣的可以了解一下2022-03-03
javascript中定義變量const和var有什么區(qū)別詳解
這篇文章主要給大家介紹了關(guān)于javascript中定義變量const和var有什么區(qū)別的相關(guān)資料,在JavaScript中var和const都是用于聲明變量的關(guān)鍵字,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
webpack+express實(shí)現(xiàn)文件精確緩存的示例代碼
這篇文章主要介紹了webpack+express實(shí)現(xiàn)文件精確緩存的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
詳解如何在微信小程序開發(fā)中正確的使用vant ui組件
這篇文章主要介紹了詳解如何在微信小程序開發(fā)中正確的使用vant ui組件,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
基于JavaScript實(shí)現(xiàn)點(diǎn)擊頁面任何位置返回
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)點(diǎn)擊頁面任何位置返回的實(shí)例代碼,需要的朋友可以參考下2016-08-08
Node.js實(shí)戰(zhàn) 建立簡單的Web服務(wù)器
本章我們同樣通過實(shí)戰(zhàn)的演練,利用Node.js建立一個(gè)簡單的Web服務(wù)器2012-03-03
JavaScript使用DeviceOne開發(fā)實(shí)戰(zhàn)(一) 配置和起步
這篇文章主要介紹了JavaScript使用DeviceOne開發(fā)實(shí)戰(zhàn)(一) 配置和起步的相關(guān)資料,需要的朋友可以參考下2015-12-12

