自定义微信小程序修改checkbox如何实现？
导读：这篇文章给大家介绍了“自定义微信小程序修改checkbox如何实现？”的相关知识，讲解详细，步骤过程清晰，对大家进一步学习和理解“自定义微信小程序修改checkbox如何实现？”有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟...
这篇文章给大家介绍了“自定义微信小程序修改checkbox如何实现？”的相关知识，讲解详细，步骤过程清晰，对大家进一步学习和理解“自定义微信小程序修改checkbox如何实现？”有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。
很多时候我们想把小程序radio和checkbox改成标签的样式，有木有感觉自带的有点丑？研究了很久，终于搞定，最终效果如下，样式可以随意修改，如果不喜欢这个样式可以自己再调整一下，颜色都可以随便改的。
wxml代码
view class=´title´>
radio单选标签/view>
radio-group bindchange="radioChange">
view class=´label´>
label class="ui-radio {
{
item.checked==true?´active´:´´}
}
" wx:for="{
{
items}
}
">
radio value="{
{
item.value}
}
" checked="{
{
item.checked}
}
" />
text class="text">
{
{
item.name}
}
/text>
/label>
/view>
/radio-group>
view class=´title´>
checkbox多选标签/view>
checkbox-group bindchange="checkboxChange">
view class=´label´>
label class="ui-radio {
{
item.checked==true?´active´:´´}
}
" wx:for="{
{
checkboxItems}
}
">
checkbox value="{
{
item.name}
}
,{
{
item.id}
}
" checked="{
{
item.checked}
}
" />
text class="text">
{
{
item.name}
}
/text>
/label>
/view>
/checkbox-group>
js代码
Page({
data: {
items: [
{
value: ´USA´, name: ´美国´ }
,
{
value: ´CHN´, name: ´中国´ }
,
{
value: ´BRA´, name: ´巴西´ }
,
{
value: ´JPN´, name: ´日本´ }
,
{
value: ´ENG´, name: ´英国´ }
,
{
value: ´FRA´, name: ´法国´ }
,
],
checkboxItems: [
{
value: ´USA´, name: ´美国´, id: 0 }
,
{
value: ´CHN´, name: ´中国´, id: 1 }
,
{
value: ´BRA´, name: ´巴西´, id: 2 }
,
{
value: ´JPN´, name: ´日本´, id: 3 }
,
{
value: ´ENG´, name: ´英国´, id: 4 }
,
{
value: ´FRA´, name: ´法国´, id: 5 }
,
]
}
,
radioChange: function (e) {
var items = this.data.items;
for (var i = 0;
i items.length;
i) {
items[i].checked = items[i].value == e.detail.value
}
console.log(items)
this.setData({
items: items
}
);
}
,
checkboxChange: function (event) {
var items = this.data.checkboxItems;
var id = [];
//获取标签id
for (var i = 0;
i event.detail.value.length;
i ) {
var idNum = event.detail.value[i].split(´,´);
id = id.concat(idNum[1])
}
for (var y = 0;
y items.length;
y ) {
if (id.indexOf(y "") != -1) {
items[y].checked = true;
}
else {
items[y].checked = false;
}
}
this.setData({
checkboxItems: items
}
);
}
}
)
wxss代码
.title{
margin-left: 20rpx;
margin-top: 50rpx;
}
.ui-radio radio,.ui-radio checkbox {
display: none;
}
.label{
margin-left: 10rpx;
display: flex;
flex-direction: row;
flex-wrap:wrap;
}
.ui-radio{
border: 1px solid #D9D9D9;
border-radius: 5px;
width: 160rpx;
height: 70rpx;
text-align: center;
margin: 10rpx 10rpx;
white-space:nowrap;
font-size: 14px;
}
.ui-radio.active{
background-color: #1AAD19;
color: #fff;
border-radius: 5px;
border: 1px solid #1AAD19;
width: 160rpx;
height: 70rpx;
text-align: center;
margin: 10rpx 10rpx;
white-space:nowrap;
}
.text{
color:#000;
line-height:70rpx;
font-size: 14px;
}
.ui-radio.active .text{
color:#fff;
line-height:70rpx;
font-size: 14px;
}
其实js可以根据自己的业务逻辑改的，这里只是一个demo，最主要的是css代码，希望对大家有用
以上就是关于“自定义微信小程序修改checkbox如何实现？”的介绍了，感谢各位的阅读，希望文本对大家有所帮助。如果想要了解更多知识，欢迎关注网络，小编每天都会为大家更新不同的知识。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 自定义微信小程序修改checkbox如何实现？
本文地址： https://pptw.com/jishu/655013.html