七： 表单标签

Posted 2020-08-20 淡定君

七、radio 单选框

radio-group

属性名	类型	默认值	说明
bindchange	EventHandle		radio-group中的选中项发生变化时触发change事件，event.detai = {value : 选中项radio的value

radio

属性名	类型	默认值	说明
value	String		radio标识。当该radio选中时，radio-group的change事件会携带radio的value
checked	Boolean	false	当前是否选中
disabled	Boolean	false	是否禁用

他的写法其实和多选框一样的。。只不过功能不一样。他是单选。

1 2 3 4 5 6 7 8 9 10

/* ---page/test/test.wxml----*/   <radio-group class="radio-group" bindchange="radioChange">     <label class="radio" wx:for-items="{{items}}">         <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}     </label> </radio-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: ‘法国‘},     ]   },   radioChange: function(e) {     console.log(‘radio发生change事件，携带value值为：‘, e.detail.value)   } })   /* ---page/test/test.js----*/

八、slider 滑动选择器。

在轮播章节里讲述了。所以这里跳过。下面是api

属性名	类型	默认值	说明
min	Number	0	最小值
max	Number	100	最大值
step	Number	1	步长，取值必须大于 0，并且可被 (max - min) 整除
disabled	Boolean	false	是否禁用
value	Number	0	当前取值
show-value	Boolean	false	是否显示当前value
bindchange	EventHandle		完成一次拖动后触发的事件，event.detail = {value:value}

八、switch 开关组件

属性名	类型	默认值	说明
checked	Boolean	false	是否选中
disabled	Boolean	false	是否禁用
type	String	switch	样式，有效值：switch, checkbox
bindchange	EventHandle		checked改变时触发change事件，event.detail={ value:checked}

这里也只写了一下api 基本用法 也很简单的 <switch />用法和单选框多选 差不多的。