创建一个空白项目
开始着手将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文件中遍历判断是否为当前项来高亮