五： 表单标签（1）

一、button 按钮

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

/* ---page/test/test.wxml----*/   <button size="default">default</button>   <button size="mini" type="default">mini 默认</button> <button size="mini" type="primary">mini 绿色</button> <button size="mini" type="warn">mini 红色</button> <button size="mini" type="warn" disabled="true" >mini 禁用</button> <button size="mini" plain="true"  >背景色透明</button> <button size="mini" loading="true"  >加载中</button>   <button  hover-class="abc"  >点击时使用abc样式</button>   /* ---page/test/test.wxml----*/

size	String	default	有效值default, mini
type	String	default	按钮的样式类型，有效值primary, default, warn
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带 loading 图标
formType	String	无	有效值：submit, reset，用于form组件，点击分别会触发submit/reset事件
hover-class	String	button-hover	指定按钮按下去的样式类。当hover-class="none"时，没有点击态效果

二、checkbox 多选

1 2 3 4 5 6 7 8 9 10

/* ---page/test/test.wxml----*/   <checkbox-group bindchange="checkboxChange">     <label class="checkbox" wx:for-items="{{items}}">         <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}     </label> </checkbox-group>   /* ---page/test/test.wxml----*/

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

/* ---page/test/test.js----*/   Page({   data: {     items: [       {name: 'USA', value: '美国'},       {name: 'CHN', value: '中国', checked: 'true'},       {name: 'BRA', value: '巴西'},       {name: 'JPN', value: '日本'},       {name: 'ENG', value: '英国'},       {name: 'TUR', value: '法国'},     ]   },   checkboxChange: function(e) {     console.log('checkbox发生change事件，携带value值为：', e.detail.value)   } })   /* ---page/test/test.js----*/

同理这里使用W3C的例子。。这里又出现了 bindchange。他代表当checkbox选中时触发。看下文档。

checkbox-group：

bindchange

EventHandle

checkbox-group中选中项发生改变是触发change事件，detail = {value:[选中的checkbox的value的数组]}

checkbox：

alue	String		checkbox标识，选中时触发checkbox-group的change事件，并携带checkbox的value
disabled	Boolean	false	是否禁用
checked	Boolean	false	当前是否选中，可用来设置默认选中

 

三、form 表单

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

/* ---page/test/test.wxml----*/   <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/test/test.wxml----*/

1 2 3 4 5 6 7 8 9 10 11 12 13

/* ---page/test/test.js----*/   Page({   formSubmit: function(e) {     console.log('form发生了submit事件，携带数据为：\n', e.detail.value)   },   formReset: function() {     console.log('form发生了reset事件')   } })   /* ---page/test/test.js----*/

同样贴W3C的代码。。这里值得注意的 就是 button的 formType 属性 有submit 和 reset 。