29. 教你零基础搭建小程序:小程序的常见组件—radio

筒子们，来了。

这一章继续继续，讲解小程序的常见组件（7）— radio单选框。

它与网页的单选框用法是大致相同的，但是有2个细节需特别注意。

1、可以通过 color属性来修改颜色

如上图，"选中"图标被选中时，默认样式是呈现绿色，这里可以通过 color属性来修改颜色。

2、当需要选中某个单选框，触发某一事件时，需和radio group 一起使用。

啥意思呢？看不懂？

别急，我们用一个需求来讲讲就懂了。

需求：创建男，女两个标签，当选中一个时，在图标下方显示文字"你选中的为男/女"

撸起袖子加油干：

1、新建一个页面 demo15

2、打开demo15.wxml 文件，删除原先的代码，写入如下代码：

  <radio-group bindchange="    ">
 <radio color="red" value="male">男</radio>
 <radio color="red" value="female" >女</radio>
 </radio-group>

3、保存，小程序界面显示男，女两标签。

点击男/女标签，图标出现红色选中，但没有提示文字。

别着急，我们慢慢来。

4、给radio-group 绑定change 事件，修改代码成如下：

（与上面代码神似，注意观察啊）

 <radio-group bindchange="handlechange">
 <radio color="red" value="male">男</radio>
 <radio color="red" value="female" >女</radio>
 </radio-group>

5、在demo15.wxml中，加上view标签，用来显示页面中显示的值，代码如下：

<radio-group bindchange="handlechange">  
  <radio color="red" value="male">男</radio> 
 <radio color="red" value="female" >女</radio> 
 </radio-group>

<view>您选中的是：{{gender}}</view>

保存后，小程序页面选中某个图标后，出现提示文字。

6、在demo15.js文件中，写入页面逻辑的代码。

首先先删除原先的代码，只保留data部分。

写入如下代码（内含每步的注释）：

Page({
  data: {
    gender: ""
 },
 handleChange(e){
 // 1 获取单选框中的值
 let gender=e.detail.value;
 // 2 把值 赋值给 data中的数据
 this.setData({
 // gender:gender
 gender
 })
 }
})

保存后，小程序显示如下，选中某一个图标，下面就会有提示文字。

我们的需求实现了。

以上步骤很好的解释了radio 单选框的第2个细节：

当需要选中某个单选框，触发某一事件时，需和radio group 一起使用。

还有第一个细节：radio的颜色属性。

我们演示一下：

很简单，只需一步就搞定。

修改demo15.wxml文件中 radio color 的部分，

这里将原先的红色修改为 绿色（green），其余不变。

代码如下：

  <radio-group bindchange="handlechange">
 <radio color="green" value="male">男</radio>
 <radio color="green" value="female" >女</radio>
 </radio-group>
 
 <view>您选中的是：{{gender}}</view>

保存后，图标被选中后的颜色发生了变化：

到这里，我们的第一个小细节也演示完了。

单选框的用法基本就这两点与网页中的单选框的使用不同，其余具体知识点，请移步官方文档。

快门传送：https://developers.weixin.qq.com/miniprogram/dev/component/radio.html