微信小程序 radio使用及默认样式修改

迟好~

已于 2023-03-21 14:41:09 修改

阅读量1.2k

点赞数

文章标签：微信小程序 javascript 前端

于 2023-03-20 19:42:12 首次发布

本文链接：https://blog.csdn.net/weixin_45689786/article/details/129672362

版权

在这里插入图片描述

结构

 <view class="order-item">
        <view class="title">运输方式</view>
        <view>
            <radio-group bindchange="transportRadioChange" class="radio-group">
                <label wx:for="{{transport_list}}" wx:key="index" class="radio-item" wx:for-item="item">
                    <view>
                    //默认选中的值
                        <radio value="{{item.value}}" checked='{{item.value == form.deli_address_type}}' />
                    </view>
                    <view class="weui-cell__bd">{{item.name}}</view>
                </label>
            </radio-group>
        </view>
    </view>

– 样式

.order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  /* height: 100rpx; */
  background: #fff;
  /* line-height: 100rpx; */
  border-bottom: 2rpx solid #f2f2f2;
  padding: 30rpx 26rpx 30rpx 28rpx;
  box-sizing: border-box;

  /* line-height: 55px; */
}
.title {
  width: 125rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #1c1e25;
}
.radio-group {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 400rpx;
}

.radio-item {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

获取选中的值

  transportRadioChange: async function (e) {
        var _this = this;
        _this.setData({
            'form.deli_address_type': e.detail.value,
        })
        },

-修改默认样式
在这里插入图片描述

//默认样式
    radio .wx-radio-input {
      width: 40rpx !important;
      height: 40rpx !important;
      border-radius: 50% !important;
    }
//选中的对勾去掉
    radio .wx-radio-input.wx-radio-input-checked::before {
      content: "";
      width: 25rpx;
      height: 25rpx;
      border-radius: 50%;
      background-color: #fff;
    }
//选中样式
    radio .wx-radio-input.wx-radio-input-checked {
      width: 40rpx !important;
      height: 40rpx;
      background: #007ef8 !important;
      border: none !important;
      border-radius: 50% !important;
    }```