小程序实现多选框功能
时间：2020-10-16 12:45:36 | 栏目：JavaScript代码 | 点击：次
最近写小程序的时候，遇到多选框的问题！并不是多选框不好操作，而是小程序的多选框实在太丑了好吗！本来的初衷是想修改一下默认样式就OK了，从边框 宽度 到背景 却在最后选择出来的额icon上无从下手！没办法自己手写checked的效果采用的是icon图标。感兴趣的可以往下看看！
先来看看效果图
实现的原理也非常的简单，数据渲染到列表，绑定事件修改列表项的checked属性，不建议直接操作data的数据，当要操作的时候可以定义一个局部变量，局部操作完成后，在赋值给data，利用数据双向绑定的特性，就完成所有的操作
wxml
<view class='header1'>
<view class='header'>
<view class='header_con flex_between'>
<view class='left'>
共计{{items.length}}件商品
</view>
<view class='right flex_end'>
<view wx:if="{{!management_good}}" class='flex_center' bindtap='management'>
管理
</view>
<view wx:if="{{management_good}}" class='flex_center' bindtap='finish_management'>
完成
</view>
</view>
</view>
</view>
</view>
<view class='header2'>
<view class='header'>
<view class='header_con flex_between'>
<input value='类目一' disabled='{{title_disabled}}' focus="{{!title_disabled}}">
</input>
<view class='right flex_end'>
<block wx-if="{{title_disabled}}">
<image src='../../../image/hotel/delete.png' bindtap='change_classname'></image>
</block>
<block wx-if="{{!title_disabled}}">
<view class='flex_center' bindtap='finish_classname'>
完成
</view>
</block>
</view>
</view>
</view>
</view>
<view class='onlinechoose'>
<view class='hotel_list flex_center' wx:for="{{items}}" wx:key="items" wx:for-item="i" data-id="{{index}}" bindtap='select'>
<view class='list_cons flex_start'>
<view wx:if="{{management_good}}" class='lefts'>
<block wx-if="{{!i.checked}}">
<view class='icon_none'></view>
</block>
<block wx-if="{{i.checked}}">
<icon type="success" size="30" color="red" />
</block>
</view>
<image src='../../../image/hotel/demoimg.jpg'></image>
<view class='right'>
<view class='name'>
{{i.name}}
</view>
<view class='list1 flex_between'>
<view class='left'>
<view class='condition1'>
16?O|双人床|含早
</view>
<view class='condition2'>
<block>
间数：10
</block>
<block>
间数：2
</block>
</view>
</view>
</view>
<view class='list1 flex_between'>
<view class='left'>
<view class='condition2'>
类目一
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class='bottom flex_between' wx:if="{{management_good}}">
<view class='left flex_start'>
<block wx:if="{{select_all}}">
<view bindtap='select_none' class='flex_start'>
<icon type="success" size="30" color="red" />
<view>
取消全选
</view>
</view>
</block>
<block wx:if="{{!select_all}}">
<view bindtap='select_all' class='flex_start'>
<view class='select_none'>
</view>
<view>
全选
</view>
</view>
</block>
</view>
<view class='right flex_end'>
<view style='text-align:right'>
<view class='all'>
共选中{{middlearr.length}}件商品
</view>
</view>
<view bindtap='deleteitem' class='sure'>
删除
</view>
</view>
</view>
下面是我的代码 由于wxss我是在app.wxss和当前文件都有的没太多的整理全都贴上去了，在这里多说一句小程序是支持弹性布局的，当你命名好几个弹性盒子的类名后，将会发现css将会减少很大的工作量
wxss
.header1{
background-color: #f5f5f5;
}
.header2{
background-color: #ffffff;
}
.header {
width: 100%;
height: 80rpx;
border-bottom: 1rpx solid #d6d6d6;
}
.header .header_con {
width: 700rpx;
height: 80rpx;
margin: 0 auto;
color: #333;
font-size: 30rpx;
}
.header .header_con image{
width: 44rpx;
height: 44rpx;
}
.header .header_con .right{
color: #ff4965;
}
.bottom{
width: 100%;
height: 100rpx;
border-top: 1rpx solid #d6d6d6;
background-color: #fff;
position: fixed;
left: 0rpx;
bottom: 0rpx;
}
.bottom .left{
margin-left: 25rpx;
}
.bottom .left .select_none{
width: 60rpx;
height: 60rpx;
border: 1rpx solid #d6d6d6;
border-radius: 50%;
}
.bottom .right .all{
color: #ff830f;
font-size: 26rpx;
}
.bottom .right .gray{
color: #666666;
font-size: 22rpx;
}
.bottom .right .sure{
margin-left: 22rpx;
width: 220rpx;
height: 100rpx;
line-height: 100rpx;
text-align: center;
background-color: #ff4965;
color: #fff;
}
/*列表*/
.onlinechoose{
width: 750rpx;
margin-top: 15rpx;
background-color: #ffffff;
font-size: 32rpx;
}
.onlinechoose .hotel_list{
width: 750rpx;
height: 260rpx;
border-bottom: 1rpx solid #d6d6d6;
background-color: #ffffff;
}
.onlinechoose .hotel_list .icon_none{
width: 60rpx;
height: 60rpx;
border: 1rpx solid #d6d6d6;
border-radius: 50%;
}
.onlinechoose .hotel_list .list_cons{
width: 700rpx;
height: 200rpx;
}
.onlinechoose .list_cons .lefts{
width: 80rpx;
}
.onlinechoose .list_cons image{
width: 200rpx;
height: 200rpx;
margin-right: 25rpx;
}
.list_cons .right{
width: 395rpx;
height: 200rpx;
}
.list_cons .right .name{
font-size: 32rpx;
color: #333333;
font-weight: 700;
letter-spacing: 3rpx;
margin-bottom: 20rpx;
}
.list_cons .right .list1{
margin-bottom: 17rpx;
}
.list_cons .right .list1 .condition1{
font-size: 28rpx;
color: #999999;
margin-bottom: 15rpx;
}
.list_cons .right .list1 .condition2{
font-size: 24rpx;
color: #999999;
}
.list_cons .right .list1 .act{
color: #2d8622;
}
.list_cons .right .list1 .r{
font-size: 24rpx;
color: #ff4965;
}
.list_cons .right .list1 .big{
font-size: 32rpx;
}
.list_cons .right .lists2{
height: 36rpx;
line-height: 36rpx;
font-size: 22rpx;
}
.list_cons .right .lists2 .left{
width: 162rpx;
text-align: center;
color: #ff4965;
border: 1rpx solid #ff4965;
box-sizing: border-box;
border-radius: 5rpx;
}
.list_cons .right .lists2 .right2{
color: #999999;
}
.flex_center{
display: flex;
display: -webkit-flex;
justify-content: center;
align-items: center;
}
.flex_between{
display: flex;
display: -webkit-flex;
justify-content: space-between;
align-items: center;
}
.flex_start{
display: flex;
display: -webkit-flex;
justify-content: flex-start;
align-items: center;
}
.flex_end{
display: flex;
display: -webkit-flex;
justify-content: flex-end;
align-items: center;
}
js
js纯手写虽然不太好吧！但是功能实现了，万恶 的checkbox魔鬼
初始化
data: {
imgUrl: imgUrl,
title_disabled:true,//控制修改表头名字
management_good:false,
select_all:false,
middlearr:[],
items: [
{ name: '1', checked: false},
{ name: '2', checked: false},
{ name: '3', checked: false},
{ name: '4', checked: false},
{ name: '5', checked: false},
{ name: '6', checked: false},
],
},
// 改变类目的名字
change_classname:function(){
let that = this;
that.setData({
title_disabled: !that.data.title_disabled,
});
// 这里自动获取焦点
},
finish_classname: function () {
let that = this;
that.setData({
title_disabled: !that.data.title_disabled,
})
},
// 管理商品
management:function(){
let that = this;
that.setData({
management_good: true,
})
},
finish_management:function(){
let that = this;
that.setData({
management_good:false,
})
},
// 选择
select:function(e){
var that = this;
let arr2 = [];
if (that.data.management_good == false){
return;
}else{
var arr = that.data.items;
var index = e.currentTarget.dataset.id;
arr[index].checked = !arr[index].checked;
console.log(arr);
for(let i=0;i<arr.length;i++){
if(arr[i].checked){
arr2.push(arr[i])
}
};
that.setData({
items: arr,
middlearr:arr2
})
}
},
// 删除
deleteitem:function(){
var that = this;
let arr = that.data.items;
let arr2 = [];
console.log(arr);
for(let i=0;i<arr.length;i++){
if (arr[i].checked == false){
arr2.push(arr[i]);
}
}
that.setData({
items:arr2,
middlearr:[]
})
},
// 全选
select_all:function(){
let that = this;
that.setData({
select_all: !that.data.select_all
})
if (that.data.select_all){
let arr = that.data.items;
let arr2 = [];
for (let i = 0; i < arr.length; i++) {
if (arr[i].checked == true) {
arr2.push(arr[i]);
}else{
arr[i].checked = true;
arr2.push(arr[i]);
}
}
that.setData({
items: arr2,
middlearr:arr2
})
}
},
// 取消全选
select_none:function(){
let that = this;
that.setData({
select_all: !that.data.select_all
})
let arr = that.data.items;
let arr2 = [];
for (let i = 0; i < arr.length; i++) {
arr[i].checked = false;
arr2.push(arr[i]);
}
that.setData({
items: arr2,
middlearr:[]
})
},