3-2 radio组件

radio

基础库 1.0.0 开始支持，低版本需做兼容处理。

单选项目。

属性	类型	默认值	必填	说明	最低版本
value	string		否	<radio> 标识。当该<radio> 选中时，<radio-group> 的 change 事件会携带<radio>的value	1.0.0
checked	boolean	false	否	当前是否选中	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
color	string	#09BB07	否	radio的颜色，同css的color	1.0.0

示例代码

在开发者工具中预览效果

//单选按钮
<radio class='radioOne' checked="{{ischeck}}" color="#DE5245" bindtap='radioClick'>
点击我
</radio>

Page({
  data: {
    items: [
      ischeck:true
    ]
  },

  radioClick: function(e){
    let chageFlag = !this.data.ischeck;
    this.setData({
      ischeck: chageFlag
    });
    console.log(e, chageFlag);
  }
})

 

 

radio-group

基础库 1.0.0 开始支持，低版本需做兼容处理。

单项选择器，内部由多个 <radio> 组成。

属性	类型	默认值	必填	说明	最低版本
bindchange	EventHandle		否	<checkbox-group>中选中项发生改变时触发 change 事件，detail = {value:[选中的checkbox的value的数组]}

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

多项选择时可使用(checked不设置，则默认为都不选中)

<radio-group class="radio-group" bindchange="radioChange">
  <label class="radio" wx:for="{{items}}">
    <radio value="{{item.name}}" checked="{{item.checked}}" />
    {{item.value}}
  </label>
</radio-group>

文本内容来自文档：https://developers.weixin.qq.com/miniprogram/dev/component/radio.html