微信小程序（十六）form組件詳細介紹

更新時間：2016年09月27日 14:35:02 作者：順子_RTFSC

這篇文章主要介紹了微信小程序form組件詳細介紹的相關(guān)資料,需要的朋友可以參考下

form表單組件是提交form內(nèi)的所有選中屬性的值，注意每個form表單內(nèi)的組件都必須有name屬性指定否則提交不上去，button中的type兩個submit，reset屬性分別對應(yīng)form的兩個事件

主要屬性：

wxml

<form bindsubmit="listenFormSubmit" bindreser="listenFormReser" >
 <checkbox-group name="checkbox" bindchange="listenerCheckbox">
  <label style="display: flex" wx:for-items="{{items}}">
   <checkbox value="{{item.name}}"/>{{item.value}}
  </label>
 </checkbox-group>

<!--button formType屬性兩個可選值submit, reset分別會觸發(fā)form的submit，reser事件 -->
 <button formType="submit" type="primary">提交</button>
 <button formType="reset" type="warn">重置</button>
</form>

js

Page({
 /**
  * 初始化數(shù)據(jù)
  */
 data:{
 items: [
  {name: 'JAVA', value: 'Android', checked: 'true'},
  {name: 'Object-C', value: 'IOS'},
  {name: 'JSX', value: 'ReactNative'},
  {name: 'JS', value: 'wechat'},
  {name: 'Python', value: 'Web'}
 ]
 },

 listenCheckboxChange: function() {
 console.log(e.detail.value);
 },

 onLoad:function(options){
 // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
 }
})

相關(guān)文章：

hello WeApp                     icon組件
Window                             text組件                                 switch組件
 tabBar底部導(dǎo)航               progress組件                         action-sheet
應(yīng)用生命周期                     button組件                            modal組件
頁面生命周期                     checkbox組件                       toast組件
模塊化詳                            form組件詳                            loading 組件
數(shù)據(jù)綁定                            input 組件                             navigator 組件
 View組件                         picker組件                             audio 組件
 scroll-view組件                  radio組件                               video組件
 swiper組件                       slider組件                             Image組件