微信小程序修改radio的样式，以及获取radio选择的值（自定义radio样式）-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序修改radio的样式，以及获取radio选择的值（自定义radio样式）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

博主介绍：本人专注于Android/java/数据库/微信小程序技术领域的开发，以及有好几年的计算机毕业设计方面的实战开发经验和技术积累；尤其是在安卓（Android）的app的开发和微信小程序的开发，很是熟悉和了解；本人也是多年的Android开发人员；希望我发布的此篇文件可以帮助到您；

🍅希望此文章可以帮助到您🍅

微信小程序文章推荐

效果显示

1：默认样式

2：自定义样式

一、前端界面

二、js逻辑处理

三、留个脚印吧

微信小程序文章推荐

微信小程序布局图片上面显示文字

微信小程序实现左边图片右边文字效果

微信小程序获取当前日期和时间

微信小程序绘制地图轨迹线路

微信小程序绘制marker

微信小程序之绘制多个marker以及调用手机地图软件导航

效果显示

1：默认样式

微信小程序radio样式,微信小程序,微信小程序,小程序

2：自定义样式

微信小程序radio样式,微信小程序,微信小程序,小程序

一、前端界面

<view class="zoomtop">

            <view style="font-weight: bold;;margin-left: 15rpx;font-size: 32rpx;">

              车牌颜色：

            </view>

            <view class="inputInfor">

              <view class="page-section">

                <radio-group bindchange="radioChange" class="form-radio_wrap" style="font-size: 30rpx;">

                  <label class="radio" style="margin-left: 10rpx;">

                    <radio value="1" checked="true" />蓝牌

                  </label>

                  <label class="radio" style="margin-left: 25rpx;">

                    <radio value="2" />黄牌

                  </label>

                </radio-group>

              </view>

            </view>

          </view>

二、css样式

radio .wx-radio-input {

  width: 35rpx;

  height: 35rpx;

  border-radius: 50%;

  border: 2rpx solid #000;

  background: transparent;

}

radio .wx-radio-input.wx-radio-input-checked {

  width: 35rpx;

  height: 35rpx;

  border: 2rpx solid #000;

  background-color: white !important;/*外圈边框与内圈实心圆间的内容的颜色，不设置就默认是上面的绿色*/

}



radio .wx-radio-input.wx-radio-input-checked::before {

  width: 35rpx;

  height: 35rpx;

  border-radius: 50%;

  /* 圆角 */

  width: 20rpx;

  /* 选中后对勾大小，不要超过背景的尺寸 */

  height: 20rpx;

  /* 选中后对勾大小，不要超过背景的尺寸 */

  line-height: 20rpx;

  text-align: center;

  font-size: 0rpx;

  /* 对勾大小 30rpx */

  color: transparent;

  /* 对勾颜色白色 */

  background: #000;

  transform: translate(-50%, -50%) scale(1);

}

三、获取选择的值

  radioChange(e) {

        console.log('radio发生change事件，携带value值为：', e.detail.value)

        this.setData({

            choiceIsYH:e.detail.value

        })

    },