微信小程序：实现单选按钮

样式：

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

文章来源地址https://uudwc.com/A/Ev0aY