|文档地址
https://developers.weixin.qq.com/miniprogram/dev/component/radio.html
创建一个空白项目
开始着手将index.wxml与index.js替换成文档中的代码
照搬文档中的代码并略作修改
<radio-groupclass="radio-group"bindchange="radioChange">
<labelclass="radio"wx:for="{{items}}">
<radiovalue="{{item.value}}"checked="{{item.checked}}"/>{{item.title}}
</label>
</radio-group>
//index.js
* Page({
* data:{
* items:[
* {value:'USA', title:'美国'},
* {value:'CHN', title:'中国',checked:'true'},
* {value:'BRA', title:'巴西'},
* {value:'ENG', title:'英国'},
* },
* radioChange:function(e){
* console.log('radio发生change事件，携带value值为：', e.detail.value)
* }
* })
改动的地方在于key/value的命名，value作为真正的取值项，title作为显示项，更符合习惯一些。
开始重写样式
为radio-group加个背景色
* .radio-group{
* background-color:#F8F8F8;
* display: flex;
* }
把radio本身隐藏
* .radio-group radio {
* display: none;
* }
label均匀分布，文字居中
* label {
* text-align: center; flex:1;
* }
为当前选中项高亮颜色
在radio change事件中保存当前选中值
* this.setData({
* country: e.detail.value
* });
在wxml文件中遍历判断是否为当前项来高亮
预览效果
下载地址：https://gitee.com/laeser/demo-weapp
一点小瑕疵
取值选中checked效果，不能简单地通过设定radio-group的value值来自动实现，，而是要遍历每一个标签来判断是否设定checked，这点是radio-group不够完善的地方，但也足够我们了。yu
专栏作家
黄秀杰，微信公众号：huangxiujie85。小程序社区博主。分享移动应用快速开发实战，坚持原创，包括图文与视频教程。
本文原创发布于小程序社区。未经许可，禁止转载
原文地址：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=38607