创建一个空白项目

开始着手将index.wxml与index.js替换成文档中的代码

照搬文档中的代码并略作修改
菠菜源码二开（企 娥:217 1793 408）
<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文件中遍历判断是否为当前项来高亮