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

单选框

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

最后来一张效果图吧

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

vant weapp 多选上传图片_小程序结合vant weapp的复选框（checkbox）组件实现全选、反选、多选...
我是结合的vant weapp的checkbox实现的,less代码我就不给了 index.wpy {{list.materail_name}} {{list.materail_brand}} {{l ...
小程序结合vant weapp的复选框（checkbox）组件实现全选、反选、多选
我是结合的vant weapp的checkbox实现的,less代码我就不给了 index.wpy <view class="item"><van-checkbo ...
微信小程序radio单选框
微信小程序radio单选框效果: 选中男返回male,选中女返回female wxml: <radio-group bindchange="handlechange"> ...
微信小程序radio单选框如何修改宽高及选中样式
之前写过关于多选框设置样式的办法,其实与单选框设置的方法一样,唯一不同的是,在css样式里,/* 选中后的背景样式 (红色背景无边框可根据UI需求自己修改) */的下面定义的css需要加上!im ...
微信小程序 css边框阴影,微信小程序|CSS的内边距和圆框
本文首发于微信公众号: "算法与编程之美",欢迎关注,及时了解更多此系列文章. 问题描述在制作小程序的时候会经常用到浮动来设计各种组件的排版,微信小程序对排版的要求很高. 光有浮 ...
微信小程序（第七章）- 搜索框的实现
微信小程序(第七章)- 搜索框的实现搜索框的组成定义布局容器微信小程序1个页面所对应的4个文件具体实现步骤框架实现样式实现搜索框的组成外部容器i 内部容器两者关系:外部容器包裹内部容 ...
微信小程序实现单选、全选功能
前言概述本文介绍微信小程序实现单选.全选功能,效果如下: 实现过程 1.先实现页面效果,文件*.wxml和*.wxss代码如下: <view class="container&quo ...
html制作单选网页程序,网页制作基础：单选框和复选框的应用_html
在用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,在html的标记中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中的选项用户可以任意选择多项,甚 ...
html:(19):单选框，复选框，下拉列表框
使用单选框.复选框,让用户选择在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户 ...

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

单选框

复选框

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

最新文章

热门文章