小程序： 自定义 -- 单选radio多选checkbox的样式

Posted 2021-01-18 ljr210

1. 单选 radio

  (1) wxml

  <view>
    <!-- 单项选择器radio-group: 内部由多个<radio/>组成 -->
    <radio-group bindchange="radioChange" >
      <view wx:for="{{radioData}}" wx:key="index">
        <label>
          <radio value="{{index}}">{{item.name}}</radio>
        </label> 
      </view>  
    </radio-group>
  </view>

View Code

 

  (2) wxss

/* 未选中  样式*/
radio .wx-radio-input{
   width: 30rpx;
   height: 30rpx;
   border-radius: 50%;
}

/* 选中  样式(无边框、紫色背景 -- 可自定义) */
radio .wx-radio-input.wx-radio-input-checked{
   border: none;
   background: purple!important;
}

/* 选中时 对勾样式 （白色对勾 -- 可自定义） */
radio .wx-radio-input.wx-radio-input-checked::before{
   width: 30rpx;   /* 选中时对勾大小，不要超过背景的尺寸 */
   height: 30rpx;   /* 选中时对勾大小，不要超过背景的尺寸 */
   line-height: 30rpx;
   border-radius: 50%;
   text-align: center;
   font-size: 20rpx; /* 对勾大小 */
   color: #fff; /* 对勾颜色 */
   background: transparent;
   transform: translate(-50%, -50%) scale(1);
   -webkit-transform: translate(-50%, -50%) scale(1);
}

View Code

 

  (3) js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    radioData: [
      {name: ‘苹果‘ },
      {name: ‘香蕉‘ },
      {name: ‘猕猴桃‘},
    ]
  },

  radioChange: (res) => {
    console.log(res)
  }
})

View Code

 

效果呈现：

 

2. 多选 checkbox -- 只需要将上面代码中所有的 radio  替换成  checkbox 即可

  (1) wxml

<view>
    <!-- 多项选择器checkbox-group: 内部由多个checkbox组成 -->
    <checkbox-group bindchange="checkboxChange" >
      <view wx:for="{{checkboxData}}" wx:key="index">
        <label>
          <checkbox value="{{index}}">{{item.name}}</checkbox>
        </label> 
      </view>  
    </checkbox-group>
</view>

View Code

 

  (2) wxss

/* 未选中  样式*/
checkbox .wx-checkbox-input{
   width: 30rpx;
   height: 30rpx;
   border-radius: 50%;
}

/* 选中  样式(无边框、紫色背景 -- 可自定义) */
checkbox   .wx-checkbox-input.wx-checkbox-input-checked{
   border: none;
   background: purple!important;
}

/* 选中时 对勾样式 （白色对勾 -- 可自定义） */
checkbox   .wx-checkbox-input.wx-checkbox-input-checked::before{
   width: 30rpx;   /* 选中时对勾大小，不要超过背景的尺寸 */
   height: 30rpx;   /* 选中时对勾大小，不要超过背景的尺寸 */
   line-height: 30rpx;
   border-radius: 50%;
   text-align: center;
   font-size: 20rpx; /* 对勾大小 */
   color: #fff; /* 对勾颜色 */
   background: transparent;
   transform: translate(-50%, -50%) scale(1);
   -webkit-transform: translate(-50%, -50%) scale(1);
}

View Code

 

  (3) js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    checkboxData: [
      {name: ‘苹果‘ },
      {name: ‘香蕉‘ },
      {name: ‘猕猴桃‘},
    ]
  },

  checkboxChange: (res) => {
    console.log(res)
  }
})

View Code