样式:
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}}的值},})