微信小程序实现单选框以及复选框默认样式修改(超详细)

超、凢脫俗 2023-07-24 08:59 38阅读 0赞

### 单选框  ###

wxml

<view class="option-list">
        <radio-group class="radio-group" bindchange="radioChange">
          <label class="radio" wx:for="{
       {radioChange}}" wx:key="index">
            <radio value="{
       {item.name}}" checked="{
       {item.checked}}" color="#fff"></radio>
            <text>{
       {item.value}}</text>
          </label>
        </radio-group>
      </view>

wxss

.option-list {
      background: white;
      padding: 0 40rpx;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #efefef;
    }
    
    .radio-group {
      width: 100%;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .radio-group .radio {
      height: 100rpx;
      display: flex;
      align-items: center;
    }
    
    .radio-group .radio text {
      margin-left: -5rpx;
    }
    
    radio {
      transform: scale(0.6);
    }
    
    /* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
    
    radio .wx-radio-input.wx-radio-input-checked {
      /* border: none; */
      border-color: gray !important;
      /* background-color: #fff!important; *//* background-color: transparent!important; *//* 居中 *//* 
      display: flex;
      justify-content: center;
      align-items: center;
      */
    }
    
    /* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
    
    radio .wx-radio-input.wx-radio-input-checked::before {
      /* 去除对号 */
      content: '';
      /* background: #fff; */
      width: 36rpx;
      height: 36rpx;
      border-radius: 50%;
      /* background: red; */
      background-color: gray;
      /* 居中 *//* margin-top: 0rpx; *//* display: flex; *//* position: relative; */
    }

data: {
        radioChange: [{
            name: "包邮体验",
            checked: 'true'
          },
          {
            name: "付邮费体验",
          },
          {
            name: "交押金体验",
          }
        ]
    }
    radioChange: function (e) {
        console.log('radio发生change事件，携带value值为：', e.detail.value)
      },

很简单

使用过的应该都知道原效果默认的样式

我直接给大家看一下修改后的效果吧

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

### 复选框  ###

wxml

<checkbox-group bindchange="handelItemChange">
        <label wx:for="{
       {checkBoxList}}" wx:key="id">
          <checkbox value="{
       {item.value}}"></checkbox>
          <view>{
       {item.name}}</view>
        </label>
      </checkbox-group>

wxss

checkbox-group {
      height: 100rpx;
      display: flex;
      align-items: center;
    }
    checkbox-group label {
      display: flex;
    }
    checkbox-group label view {
      margin-left: -10rpx; 
      align-self: center;
    }
    checkbox-group label:nth-child(1) {
      margin-right: 30rpx;
    }
    checkbox-group label:nth-child(2) {
      margin-right: 20rpx;
    }
    checkbox {
      transform: scale(0.6);
      align-self: center;
    }
    checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
      /* 改变对号颜色 */
      color: gray;
      font-weight: 700;
    }

Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        // 复选框
        checkBoxList: [
          {
            id: 0,
            name: "新品",
            value: "apple"
          },
          {
            id: 1,
            name: "我能兑换的商品",
            value: "grape"
          },
        ],
        checkedList: [],
      },
      // 复选框的选中事件
      handelItemChange(e) {
        // 1 获取被选中的复选框的值
        const checkedList = e.detail.value;
        // 2 进行赋值
        this.setData({
          checkedList
        })
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function(options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function() {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function() {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function() {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function() {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function() {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function() {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function() {
    
      }
    })

最后来一张效果图吧

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: /images/20230528/75dbe95cf6644dccb7a6a66aacb1bdfc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1]: /images/20230528/2849ac7bbe1f4024bcf1fbdfad721a21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 2]: /images/20230528/cfa9887737d945c886f1f59859cf3d23.png