首页 > 代码库 > 七： 表单标签（3）

七： 表单标签（3）

2024-08-22 10:53:58   220人阅读

七、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 />用法和单选框多选 差不多的。
 

七： 表单标签（3）


联系
我们