最近写小程序的时候，遇到多选框的问题！并不是多选框不好操作，而是小程序的多选框实在太丑了好吗！本来的初衷是想修改一下默认样式就OK了，从边框 宽度 到背景 却在最后选择出来的额icon上无从下手！没办法自己手写checked的效果采用的是icon图标。感兴趣的可以往下看看！
先来看看效果图
实现的原理也非常的简单，数据渲染到列表，绑定事件修改列表项的checked属性，不建议直接操作data的数据，当要操作的时候可以定义一个局部变量，局部操作完成后，在赋值给data，利用数据双向绑定的特性，就完成所有的操作
wxml
<view> <view> <view> <view> 共计{{items.length}}件商品 </view> <view> <view wx:if="{{!management_good}}" bindtap='management'> 管理 </view> <view wx:if="{{management_good}}" bindtap='finish_management'> 完成 </view> </view> </view> </view> </view> <view> <view> <view> <input value='类目一' disabled='{{title_disabled}}' focus="{{!title_disabled}}"> </input> <view> <block wx-if="{{title_disabled}}"> <image src='' bindtap='change_classname'></image> </block> <block wx-if="{{!title_disabled}}"> <view bindtap='finish_classname'> 完成 </view> </block> </view> </view> </view> </view> <view> <view wx:for="{{items}}" wx:key="items" wx:for-item="i" data-id="{{index}}" bindtap='select'> <view> <view wx:if="{{management_good}}"> <block wx-if="{{!i.checked}}"> <view></view> </block> <block wx-if="{{i.checked}}"> <icon type="success" size="30" color="red" /> </block> </view> <image src=''></image> <view> <view> {{i.name}} </view> <view> <view> <view> 16㎡|双人床|含早 </view> <view> <block> 间数：10 </block> <block> 间数：2 </block> </view> </view> </view> <view> <view> <view> 类目一 </view> </view> </view> </view> </view> </view> </view> <view wx:if="{{management_good}}"> <view> <block wx:if="{{select_all}}"> <view bindtap='select_none'> <icon type="success" size="30" color="red" /> <view> 取消全选 </view> </view> </block> <block wx:if="{{!select_all}}"> <view bindtap='select_all'> <view> </view> <view> 全选 </view> </view> </block> </view> <view> <view> <view> 共选中{{middlearr.length}}件商品 </view> </view> <view bindtap='deleteitem'> 删除 </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魔鬼
初始化