单选框
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; */}
js
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;}
js
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() {}})
最后来一张效果图吧
