小程序：单项选择器（radio）

一. 属性说明

radio-group

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

radio

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

二. 代码

wxml

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

wxss

.radio-group {  display: flex;  flex-direction: column;  align-items: center;}.radio {    margin-top: 20px;}

*js

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

文章转载于:https://www.jianshu.com/p/e8cf4963919b

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《小程序：单项选择器（radio）》