小程序自定义多选按钮
1、html部分
<checkbox-group bindchange="checkboxChange" class = "flex">
<label class="checkbox {{item.checked?'active':''}}"
wx:for="{{items}}"
bindtap="addclass"
data-index="{{index}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</checkbox-group>
2、css部分
checkbox{
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 100rpx;
width: 200rpx;
}
.checkbox{
position: relative;
height: 100rpx;
line-height: 100rpx;
width: 200rpx;
background: #ccc;
color: #fff;
font-size: 28rpx;
border-radius: 50rpx;
margin: 20rpx;
text-align: center;
padding: 0 20rpx;
box-sizing: border-box;
}
.flex{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.active{
background: #FED52F;
}
//JavaScript部分
Page({
data: {
items: [
{ name: 'USA', value: '美国', checked: false },
{ name: 'CHN', value: '中国', checked: true },
{ name: 'BRA', value: '巴西', checked: false },
{ name: 'JPN', value: '日本', checked: false },
{ name: 'ENG', value: '英国', checked: false },
{ name: 'TUR', value: '法国', checked: false },
]
},
checkboxChange: function (e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value)
},
//添加class 样式
addclass:function(e){
let self = this
//获取数据
let list = self.data.items
//获取index
let index = e.currentTarget.dataset.index
//如果为true变为false
if(list[index].checked){
list[index].checked=false
}else{
list[index].checked = true
}
//重新赋值
self.setData({
items:list
})
},
})
这样一个简单的 多选按钮就做出来了
效果图如下 样式可以自己修改
