样式：文章来源：https://www.toymoban.com/news/detail-722245.html
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>核心代码：文章来源地址https://www.toymoban.com/news/detail-722245.html
<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}}的值
},
})到了这里，关于微信小程序：实现单选按钮的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
