样式:
![](https://i-blog.csdnimg.cn/blog_migrate/05332566e4506c9e60e33deddef3d5be.png)
wxml
<view class="pop_line">
<view class="pop_left">性别</view>
<view class="pop_right">
<radio-group bindchange="radioChange">
<label wx:for-items="{{items}}" wx:key="index">
<radio color="#74bfe7" style="transform:scale(0.8);" value="{{item.name}}" checked="{{item.checked}}" />
{{item.value}}
</label>
</radio-group>
</view>
</view>
核心代码:
<radio-group bindchange="radioChange">
<label wx:for-items="{{items}}" wx:key="index">
<radio color="#74bfe7" style="transform:scale(0.8);" value="{{item.name}}" checked="{{item.checked}}" />
{{item.value}}
</label>
</radio-group>
注解:
bindchange:有变化执行事件
wx:for-items:表示对{{items}}进行循环
<radio>中的color属性:主要设置选中之后图标颜色
<radio>中的style属性:这里主要用来展示图标的大,scale缩放
<radio>中的value属性:主要用于事件bindchange执行之后能获取到值
<radio>中的checked属性:设置默认值
wxss
/* 行信息 */
.pop_line{
display: flex;
width:90%;
margin:4%;
}
.pop_left{
width:30%;
}
.pop_right{
width:70%;
text-align: right;
}
JavaScript
const app = getApp()
Page({
data: {
//设置单选内容
items:[
{
name:'male',
value:'男',
checked:"true"//设置默认值
},
{
name:'famale',
value:'女'
},
]
},
//单选
radioChange:function(e){
//获取单选数据
console.log(e.detail.value)//输出的是{{item.name}}的值
},
})