微信小程序复选框组件使用详解

在工作中频繁用到复选框，于是自己写了个组件，增加其复用性，提高效率。
先看效果图：

提交后得到一个选中项的id组成的数组
下边直接上代码：
代码地址为：components/checkGrop/checkGrop
wxml:

1. <form bindsubmit="formSubmit">
2. <view class='content'>
3. <!-- 一级菜单 -->
4.   <scroll-view class='scrollLeft' scroll-y>
5.    <block wx:for="{{list}}" wx:key="item">
6.     <view class="leftBox" catchtap='ontap' data-index='{{index}}' style='{{n==index?"border-left:8rpx solid #1aad16;color:#1aad16":""}}'>
7.      {{item.istitle}}
8.      <view class='num' hidden="{{checked[index].length>0?false:true}}">
9.       <text>{{allNum[index]?allNum[index]:(checked[index].length>0?checked[index].length:0)}}</text>
10.      </view>
11.     </view>
12.    </block>
13.   </scroll-view>
14.   <!-- 二级菜单 -->
15.   <scroll-view class='scrollRight' scroll-y>
16.    <view class="weui-cells weui-cells_after-title">
17.    <!-- 二级菜单中的全部选项 -->
18.     <label class="weui-cell weui-check__label" catchtap='all'>
19.      <checkbox class="weui-check" value="{{childlist[n][0].value}}" checked="{{childlist[n][0].checked}}" />
20.      <view class="weui-cell__hd weui-check__hd_in-checkbox">
21.       <icon class="weui-icon-checkbox_circle" type="circle" size="23" wx:if="{{!childlist[n][0].checked}}"></icon>
22.       lt;icon class="weui-icon-checkbox_success" type="success" size="23" wx:if="{{childlist[n][0].checked}}"></icon>
23.      </view>
24.      <view class="weui-cell__bd">{{childlist[n][0].istitle}}</view>
25.     </label>
26.     <checkbox-group bindchange="checkboxChange">
27.     <!-- 二级菜单中的剩余选项 -->
28.      <block wx:for="{{childlist[n]}}" wx:key="value">
29.       <label class="weui-cell weui-check__label" wx:if='{{item.istitle!="全部"}}'>
30.        <checkbox class="weui-check" value="{{item.id}}" checked="{{item.checked}}" />
32.        <view class="weui-cell__hd weui-check__hd_in-checkbox">
33.         <icon class="weui-icon-checkbox_circle" type="circle" size="23" wx:if="{{!item.checked}}"></icon>
34.         <icon class="weui-icon-checkbox_success" type="success" size="23" wx:if="{{item.checked}}"></icon>
35.        </view>
36.        <view class="weui-cell__bd">{{item.istitle}}</view>
37.       </label>
38.      </block>
39.     </checkbox-group>
40.    </view>
41.   </scroll-view>
42. </view>
43. <view class="btn-area">
44.   <button catchtap='back'>返回</button>
45.   <button formType="submit">提交</button>
46. </view>
47. </form>

复制代码

wxss:

1. page{
2. background: #f8f8f8;
3. }
4. .content{
5. position: absolute;
6. top:0;
7. bottom:100rpx;
8. width: 100%;
9. }
10. .scrollLeft{
11. box-sizing: border-box;
12. float: left;
13. width: 25%;
14. height: 100%;
15. border-right: 1rpx solid #ddd;
16. font-size: 35rpx;
17. }
18. .scrollRight{
19. float: left;
20. width: 75%;
21. height: 100%;
22. }
23. .leftBox{
24. position: relative;
25. box-sizing: border-box;
26. width: 100%;
27. height: 100rpx;
28. display: flex;
29. justify-content: center;
30. align-items:center;
31. border-bottom: 1rpx solid #ddd;
32. }
33. .num{
34. position: absolute;
35. top:10rpx;
36. right: 10rpx;
37. width: 30rpx;
38. height: 30rpx;
39. display: flex;
40. justify-content: center;
41. align-items: center;
42. background-color: #f10215;
43. border-radius: 50%;
44. color: white;
45. font-size: 22rpx;
46. }
47. .rightBox{
48. box-sizing: border-box;
49. width: 100%;
50. }
51. .weui-cells {
52. position: relative;
53. margin-top: 1.17647059em;
54. background-color: #FFFFFF;
55. line-height: 1.41176471;
56. font-size: 17px;
57. }
58. .weui-cells_after-title {
59. margin-top: 0;
60. }
61. .weui-cell {
62. padding: 10px 15px;
63. position: relative;
64. display: -webkit-box;
65. display: -webkit-flex;
66. display: flex;
67. -webkit-box-align: center;
68. -webkit-align-items: center;
69.      align-items: center;
70. }
71. .weui-check__label:active {
72. background-color: #ECECEC;
73. }
74. .weui-check {
75. position: absolute;
76. left: -9999px;
77. }
78. .weui-check__hd_in-checkbox {
79. padding-right: 0.35em;
80. }
81. .weui-icon-checkbox_circle,
82. .weui-icon-checkbox_success {
83. margin-left: 4.6px;
84. margin-right: 4.6px;
85. }
86. .weui-cell__bd {
87. -webkit-box-flex: 1;
88. -webkit-flex: 1;
89.      flex: 1;
90. }
91. .btn-area{
92. position: absolute;
93. bottom: 0;
94. width: 100%;
95. height: 100rpx;
96. display: flex;
97. justify-content: space-between;
98. align-items: center;
99. margin-top: 20rpx;
100. }
101. .btn-area>button:first-child{
102. width: 30%;
103. height: 80%;
104. color: white;
105. background-color: orange;
106. display: flex;
107. justify-content: center;
108. align-items: center;
109. }
110. .btn-area>button:last-child{
111. width: 65%;
112. height: 80%;
113. color: white;
114. background-color: #1aad16;
115. display: flex;
116. justify-content: center;
117. align-items: center;
118. }

复制代码

json:

1. {
2. "component":true
3. }

复制代码

js:

1. Component({
2. properties: {
3.   list: {
4.    type: Array,
5.    value: [],
6.   },
7.   select:{
8.    type: Array,
9.    value: [],
10.   }
11. },
12. data: {
13.   childlist: [],
14.   n: 0,
15.   checked: [],
16.   allNum: [],
17. },
18. ready(){
19.   var that=this;
20.   var list = that.data.list;//传递过来的数据
21.   // console.log(list)
22.   var select = that.data.select;
23.   var checked = new Array;
24.   var allNum = [];
25.    var aaa = [];
26.    // 检查默认选中状态
27.    for (let i = 0; i < list.length; i++) {
28.     for (let k = 0; k < list[i].childlist.length; k++) {
29.      for (let j = 0; j < select.length; j++) {
30.       if (list[i].childlist[k].id == select[j]) {
31.        aaa = [];
32.        // 若某条二级数组中存在多个选中的项要做判断筛选
33.        if (checked[i]) {
34.         // check中第i项如果存过值，那么将在此项中继续加入值
35.         checked[i].forEach(function (item) {
36.          aaa.push(item);
37.         })
38.         aaa.push(list[i].childlist[k]);
39.         checked[i] = aaa;
40.        } else {
41.         // check中第i项没有存过值，那么将值存入第i项
42.         if (list[i].childlist[k].istitle == "全部") {
43.          for (let s = 0; s < list[i].childlist.length; s++) {
44.           list[i].childlist[s].checked = true
45.           allNum[i] = list[i].childlist.length - 1;
46.           checked[i] = [list[i]];
47.          }
48.         } else {
49.          checked[i] = [list[i].childlist[k]];
50.         }
52.        }
53.        list[i].childlist[k].checked = true;
54.       }
55.      }
56.     }
57.    }
59.   that.setData({
60.    'childlist[0]': list[0].childlist,
61.    list: list,
62.    checked: checked,
63.    allNum: allNum,
64.   })
65.   console.log(checked);
66.   console.log(allNum);
67. },
68. methods: {
69.   ontap(e) {
70.    var that = this;
71.    var n = e.currentTarget.dataset.index;
72.    var childlist = "childlist[" + n + "]";
73.    that.setData({
74.     [childlist]: that.data.list[n].childlist,
75.     n: n
76.    })
77.   },
78.   all() {
79.    var that = this;
80.    var n = that.data.n;
81.    var childlist = "childlist[" + n + "]";
82.    var checked = "checked[" + n + "]";
83.    var allNum = "allNum[" + n + "]";
84.    var all = "";
85.    var checkArr = [];
86.    var checkboxItems = that.data.childlist[n];
87.    if (checkboxItems[0].checked) {
88.     checkboxItems[0].checked = true;
89.     checkArr = [];
90.    } else {
91.     checkboxItems[0].checked = false;
92.     // checkArr.push(checkboxItems[0])
93.     checkArr.push(that.data.list[n])
94.     all = checkboxItems.length - 1;
95.    }
96.    checkboxItems[0].checked = !checkboxItems[0].checked
97.    for (let k = 1; k < checkboxItems.length; k++) {
98.     checkboxItems[k].checked = checkboxItems[0].checked;
99.    }
100.    console.log(checkboxItems);
102.    that.setData({
103.     [childlist]: checkboxItems,
104.     [checked]: checkArr,
105.     [allNum]: all ? all : 0,
106.    }, function () {
107.     console.log(that.data.checked);
108.    })
109.   },
110.   checkboxChange(e) {
111.    var that = this;
112.    var n = that.data.n;
113.    console.log('checkbox发生change事件，携带value值为：', e.detail.value)
114.    var checkboxItems = that.data.childlist[n];
115.    var values = e.detail.value;
116.    var flag = "";
117.    var childlist = "childlist[" + n + "]";
118.    var checked = "checked[" + n + "]";
119.    var allNum = "allNum[" + n + "]";
120.    var checkedArr = [];
121.    var all = "";
123.    for (var i = 0, lenI = checkboxItems.length; i < lenI; ++i) {
124.     checkboxItems[i].checked = false;
125.     for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
126.      if (checkboxItems[i].id == values[j]) {
127.       checkboxItems[i].checked = true;
128.       checkedArr.push(checkboxItems[i]);
129.       break;
130.      }
131.     }
132.    }
133.    if (values.length == checkboxItems.length - 1) {
134.     checkboxItems[0].checked = true;
135.     // checkedArr = [checkboxItems[0]];
136.     checkedArr = [that.data.list[n]];
137.     all = checkboxItems.length - 1;
138.    }
139.    this.setData({
140.     [childlist]: checkboxItems,
141.     [checked]: checkedArr,
142.     [allNum]: all
143.    });
144.    // console.log(checkedArr)
145. },
146.   formSubmit: function (e) {
147.    var that = this;
148.    console.log('form发生了submit事件');
149.    var values = that.data.checked;
150.    var arr = [];
151.    var arr1 = [];
152.    for (let i = 0; i < values.length; i++) {
153.     if (values[i] != undefined) {
154.      arr.push(values[i]);
155.     }
156.    }
158.    for (let i = 0; i < arr.length; i++) {
159.     for (let j = 0; j < arr[i].length; j++) {
160.      arr1.push(arr[i][j])
161.     }
162.    }
163.    console.log(arr1);//选中的值
164.    var detail = arr1;
166.    this.triggerEvent("formSubmit", detail);
167.   },
168.   back() {
169.    this.triggerEvent("back");
170.   }
171. }
172. })

复制代码

使用方法：
在需要使用的页面的json中声名启用组件
如：

1. {
2. "usingComponents": {
3.   "check": "/components/checkGrop/checkGrop"
4. }
5. }

复制代码

然后在需要使用的页面的wxml中使用自己起的组件名就好了
如：

1. <check list="{{hangye}}" select="{{checkedid}}" bind:formSubmit="formSubmit" bindback="back"></check>

复制代码

其中list 是你要往组件里传递的数组。 select为默认选中的的数据的id，组件里边的参数可以根据自己的需求更换！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。