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