Detailed introduction of WeChat mini program form component-Mini Program Development-php.cn

Detailed introduction of WeChat mini program form component

高洛峰

Release： 2017-03-06 10:25:47

Original

1748 people have browsed it

Detailed introduction of WeChat mini program form component

The form component is to submit the values of all selected attributes in the form. Note that each component in the form must have a name attribute specified, otherwise it will not be submitted. In the button The two submit and reset attributes of type respectively correspond to the two events of the form

Main attributes:

Detailed introduction of WeChat mini program form component

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分别会触发form的submit，reser事件 -->
 <button formType="submit" type="primary">提交</button>
 <button formType="reset" type="warn">重置</button>
</form>

Copy after login

Page({
 /**
  * 初始化数据
  */
 data:{
 items: [
  {name: &#39;JAVA&#39;, value: &#39;Android&#39;, checked: &#39;true&#39;},
  {name: &#39;Object-C&#39;, value: &#39;IOS&#39;},
  {name: &#39;JSX&#39;, value: &#39;ReactNative&#39;},
  {name: &#39;JS&#39;, value: &#39;wechat&#39;},
  {name: &#39;Python&#39;, value: &#39;Web&#39;}
 ]
 },

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

 onLoad:function(options){
 // 页面初始化 options为页面跳转所带来的参数
 }
})

Copy after login

For more detailed introduction to WeChat mini program form components and related articles, please pay attention to the PHP Chinese website!