微信小程序修改radio的默认样式

最新推荐文章于 2024-06-13 14:49:15 发布

lannieZ

最新推荐文章于 2024-06-13 14:49:15 发布

阅读量401

点赞数

分类专栏：微信小程序文章标签：微信小程序 javascript 前端

本文链接：https://blog.csdn.net/lannieZ/article/details/127241357

版权

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

23 篇文章 0 订阅

订阅专栏

在这里插入图片描述


<radio-group bindchange="radioChange" class="form-radio_wrap">
      <block wx:for="{{wifiList}}" wx:key="{{item.id}}">
        <view class="items flex-row-between">
          <view class="flex-row-start">
            <radio wx:if="{{flag}}" value="{{item.id}}"></radio>
            <view>{{item.wifiName}}</view>
          </view>
          <image bindtap="updateWIFI" data-item="{{item}}" class="icon_right" src="/img/wifiManage/icon_right.png"></image>
        </view>
      </block>
</radio-group>


.form-radio_wrap .wx-radio-input{
  width: 40rpx; 
  height: 40rpx; 
  border-radius: 10%;
}

.form-radio_wrap .wx-radio-input.wx-radio-input-checked{
  border: none;
  background: #FC2530;
}

.form-radio_wrap radio .wx-radio-input.wx-radio-input-checked::before {
  border-radius: 10%; /* 圆角 */
  text-align: center;
  font-size: 30rpx; /* 对勾大小 30rpx */
  color: #fff; /* 对勾颜色 白色 */
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}


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

    const wifiList = this.data.wifiList
    let selectedId = ""
    wifiList.forEach(v => {
      v.checked = false
      if (v.id == e.detail.value) {
        v.checked = true
        selectedId = v.id
      }
    })
    this.setData({
      wifiList,
      selectedId
    })
    // console.log(this.data.selectedId)
}