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