小程序单选radio-group修改样式

最新推荐文章于 2025-03-04 12:41:16 发布

岩崎理奈

最新推荐文章于 2025-03-04 12:41:16 发布

阅读量6.9k

点赞数 1

分类专栏：微信小程序笔记

本文链接：https://blog.youkuaiyun.com/qq_41874847/article/details/86511992

版权

微信小程序笔记专栏收录该内容

17 篇文章

订阅专栏

在小程序开发中，遇到radio-group组件的样式调整问题，由于页面布局复杂，需要对默认的选中状态进行自定义，这比预期花费了更多时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个排版是真的麻烦，因为上面还有其他的显示，本来觉得很快的，当时弄了一会儿

checked表示默认选中

<view class='text_main1'>
        <view class="picker_group">
          <text class='text'>备注</text>
          <radio-group class="group" bindchange="comment" name="comment">
            <view class="picker_comment">
              <view class="attr_value">
                <radio color='' value='一体化'></radio>
                <label class='radio_label'>一体化</label>
              </view>
              <view class="attr_value">
                <radio color='' value='白卡'></radio>
                <label class='radio_label'>白卡</label>
              </view>
            </view>
            <view class="picker_comment">
              <view class="attr_value">
                <radio color='' value='危险品'></radio>
                <label class='radio_label'>危险品</label>
              </view>
              <view class="attr_value">
                <radio color='' value='' checked='无(默认)'></radio>
                <label class='radio_label'>无(默认)</label>
              </view>
            </view>
          </radio-group>
        </view>
      </view>

.text_main1{
  font-size: 30rpx;
  color: #495060;
  width: 100%;
  height: 130rpx;
  margin: 30rpx auto;
  margin-left: 30rpx;
}
.text {
  width: 20%;
  margin-top: 6rpx;
  float: left;
  text-align: center;
}
.picker_comment {
  width: 65%;
  margin-left: 20%;
}
.attr_value {
  float: left;
  width: 40%;
  height: 50rpx;
  margin-bottom: 20rpx;
  margin-left: 14rpx;
  margin-right: 25rpx;
  position: relative;
}

.radio_label {
  display: block;
  text-align: center;
  line-height: 50rpx;
}

radio {
  box-sizing: border-box;
  background: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* radio未选中时样式 */

radio .wx-radio-input {
  margin-right: 15rpx;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: none;
  border-radius: 6rpx;
  box-sizing: border-box;
}

/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */

radio .wx-radio-input.wx-radio-input-checked {
  background-color: transparent;
  border-color: #01c2ab;
  overflow: hidden;
  box-sizing: border-box;
}

/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */

radio .wx-radio-input.wx-radio-input-checked::before {
  font-size: 0rpx; /* 对勾大小 去掉 */
}

  data: {
    comment: '',
  },
// 备注
  comment: function(e) {
    this.setData({
      comment: e.detail.value,
    })
  }