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

最新推荐文章于 2024-08-23 11:16:55 发布

青衫折扇

最新推荐文章于 2024-08-23 11:16:55 发布

阅读量7.7k

点赞数 6

分类专栏：小程序

本文链接：https://blog.csdn.net/qq_42543264/article/details/105436119

版权

小程序专栏收录该内容

91 篇文章 40 订阅

订阅专栏

单选框

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)
  },

很简单

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

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

复选框

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() {

  }
})

最后来一张效果图吧