资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/微信小程序复选框组件使用演示示例

微信小程序复选框组件使用演示示例

3403771864 / 585人阅读

　　在工作中效率要求是很高的，现在就在频繁用到复选框，我们自己来写了个组件，增加其复用性，提高效率。

　　先看效果图：

　　这样只需提交后得到一个选中项的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. 　　<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}}" />
  31. 　　<view class="weui-cell__hd weui-check__hd_in-checkbox">
  32. 　　<icon class="weui-icon-checkbox_circle" type="circle" size="23" wx:if="{{!item.checked}}"></icon>
  33. 　　<icon class="weui-icon-checkbox_success" type="success" size="23" wx:if="{{item.checked}}"></icon>
  34. 　　</view>
  35. 　　<view class="weui-cell__bd">{{item.istitle}}</view>
  36. 　　</label>
  37. 　　</block>
  38. 　　</checkbox-group>
  39. 　　</view>
  40. 　　</scroll-view>
  41. 　　</view>
  42. 　　<view class="btn-area">
  43. 　　<button catchtap='back'>返回</button>
  44. 　　<button formType="submit">提交</button>
  45. 　　</view>
  46. 　　</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 #ffffd;
  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 #ffffd;
  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. 　　}
  51. 　　}
  52. 　　list[i].childlist[k].checked = true;
  53. 　　}
  54. 　　}
  55. 　　}
  56. 　　}
  57. 　　that.setData({
  58. 　　'childlist[0]': list[0].childlist,
  59. 　　list: list,
  60. 　　checked: checked,
  61. 　　allNum: allNum,
  62. 　　})
  63. 　　console.log(checked);
  64. 　　console.log(allNum);
  65. 　　},
  66. 　　methods: {
  67. 　　ontap(e) {
  68. 　　var that = this;
  69. 　　var n = e.currentTarget.dataset.index;
  70. 　　var childlist = "childlist[" + n + "]";
  71. 　　that.setData({
  72. 　　[childlist]: that.data.list[n].childlist,
  73. 　　n: n
  74. 　　})
  75. 　　},
  76. 　　all() {
  77. 　　var that = this;
  78. 　　var n = that.data.n;
  79. 　　var childlist = "childlist[" + n + "]";
  80. 　　var checked = "checked[" + n + "]";
  81. 　　var allNum = "allNum[" + n + "]";
  82. 　　var all = "";
  83. 　　var checkArr = [];
  84. 　　var checkboxItems = that.data.childlist[n];
  85. 　　if (checkboxItems[0].checked) {
  86. 　　checkboxItems[0].checked = true;
  87. 　　checkArr = [];
  88. 　　} else {
  89. 　　checkboxItems[0].checked = false;
  90. 　　// checkArr.push(checkboxItems[0])
  91. 　　checkArr.push(that.data.list[n])
  92. 　　all = checkboxItems.length - 1;
  93. 　　}
  94. 　　checkboxItems[0].checked = !checkboxItems[0].checked
  95. 　　for (let k = 1; k < checkboxItems.length; k++) {
  96. 　　checkboxItems[k].checked = checkboxItems[0].checked;
  97. 　　}
  98. 　　console.log(checkboxItems);
  99. 　　that.setData({
  100. 　　[childlist]: checkboxItems,
  101. 　　[checked]: checkArr,
  102. 　　[allNum]: all ? all : 0,
  103. 　　}, function () {
  104. 　　console.log(that.data.checked);
  105. 　　})
  106. 　　},
  107. 　　checkboxChange(e) {
  108. 　　var that = this;
  109. 　　var n = that.data.n;
  110. 　　console.log('checkbox发生change事件，携带value值为：', e.detail.value)
  111. 　　var checkboxItems = that.data.childlist[n];
  112. 　　var values = e.detail.value;
  113. 　　var flag = "";
  114. 　　var childlist = "childlist[" + n + "]";
  115. 　　var checked = "checked[" + n + "]";
  116. 　　var allNum = "allNum[" + n + "]";
  117. 　　var checkedArr = [];
  118. 　　var all = "";
  119. 　　for (var i = 0, lenI = checkboxItems.length; i < lenI; ++i) {
  120. 　　checkboxItems[i].checked = false;
  121. 　　for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
  122. 　　if (checkboxItems[i].id == values[j]) {
  123. 　　checkboxItems[i].checked = true;
  124. 　　checkedArr.push(checkboxItems[i]);
  125. 　　break;
  126. 　　}
  127. 　　}
  128. 　　}
  129. 　　if (values.length == checkboxItems.length - 1) {
  130. 　　checkboxItems[0].checked = true;
  131. 　　// checkedArr = [checkboxItems[0]];
  132. 　　checkedArr = [that.data.list[n]];
  133. 　　all = checkboxItems.length - 1;
  134. 　　}
  135. 　　this.setData({
  136. 　　[childlist]: checkboxItems,
  137. 　　[checked]: checkedArr,
  138. 　　[allNum]: all
  139. 　　});
  140. 　　// console.log(checkedArr)
  141. 　　},
  142. 　　formSubmit: function (e) {
  143. 　　var that = this;
  144. 　　console.log('form发生了submit事件');
  145. 　　var values = that.data.checked;
  146. 　　var arr = [];
  147. 　　var arr1 = [];
  148. 　　for (let i = 0; i < values.length; i++) {
  149. 　　if (values[i] != undefined) {
  150. 　　arr.push(values[i]);
  151. 　　}
  152. 　　}
  153. 　　for (let i = 0; i < arr.length; i++) {
  154. 　　for (let j = 0; j < arr[i].length; j++) {
  155. 　　arr1.push(arr[i][j])
  156. 　　}
  157. 　　}
  158. 　　console.log(arr1);//选中的值
  159. 　　var detail = arr1;
  160. 　　this.triggerEvent("formSubmit", detail);
  161. 　　},
  162. 　　back() {
  163. 　　this.triggerEvent("back");
  164. 　　}
  165. 　　}
  166. 　　})

　　使用方法：

　　在需要使用的页面的json中声名启用组件

</>复制代码 
  1. 　　如：
  2. 　　{
  3. 　　"usingComponents": {
  4. 　　"check": "/components/checkGrop/checkGrop"
  5. 　　}
  6. 　　}

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

　　如：

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

　　上面的代码，就是表示list 是用来往组件里传递的数组。 select为默认选中的的数据的id，这样就可以让参数依照自己的需求进行更换！


云服务器 GPU云服务器 微信小程序组件 微信小程序怎么使用 怎样使用微信小程序 如何使用微信小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/128267.html

相关文章

  • Wuss Weapp 微信小程序 UI 组件库

    摘要：或者当依赖安装完成后即可在微信小程序开发者工具里点击工具构建，此时若出现弹窗则记得吧使用模块勾上，若无弹窗则待构建完成后在详情里面手动勾上使用模块。 showImg(https://segmentfault.com/img/bVbjNrF?w=334&h=334); 微信小程序 UI 组件库 Github地址 https://github.com/phonycode/wuss-weap...

    shiguibiao 评论0 收藏0

  • Wuss Weapp 微信小程序 UI 组件库

    摘要：或者当依赖安装完成后即可在微信小程序开发者工具里点击工具构建，此时若出现弹窗则记得吧使用模块勾上，若无弹窗则待构建完成后在详情里面手动勾上使用模块。 showImg(https://segmentfault.com/img/bVbjNrF?w=334&h=334); 微信小程序 UI 组件库 Github地址 https://github.com/phonycode/wuss-weap...

    dendoink 评论0 收藏0

  • Wuss Weapp 微信小程序 UI 组件库

    摘要：或者当依赖安装完成后即可在微信小程序开发者工具里点击工具构建，此时若出现弹窗则记得吧使用模块勾上，若无弹窗则待构建完成后在详情里面手动勾上使用模块。 showImg(https://segmentfault.com/img/bVbjNrF?w=334&h=334); 微信小程序 UI 组件库 Github地址 https://github.com/phonycode/wuss-weap...

    Eastboat 评论0 收藏0

  • 「轻算账」小程序实践笔记

    摘要：资源开发文档是一套完全免费的微信小程序开发框架，扩展了小程序的能力。推荐有一些不错的解决方案封装封装跨页面事件通讯监听数据变化开发如何在微信小程序的页面间传递数据需要时可以快速过一遍。微信小程序回调，，，的使用例子供参考 这篇文章主要记录我做小程序「轻算账」过程中遇到的一些问题和解决方案，就当是做个总结，也希望其中有能够帮助到他人的信息。 showImg(https://segment...

    BigTomato 评论0 收藏0

  • 一个小时快速搭建微信小程序

    摘要：第一步搭开发环境首先，我们需要在本地搭建好微信小程序的开发环境。在微信小程序中，所有的网络请求受到严格限制，不满足条件的域名和协议无法请求。第五步配置微信小程序云端示例镜像中，已经部署好了，但是还需要在下修改配置中的域名证书私钥。 「小程序」这个划时代的产品发布快一周了，互联网技术人都在摩拳擦掌，跃跃欲试。可是小程序目前还在内测，首批只发放了 200 个内测资格（泪流满面）。本以为没有...

    izhuhaodev 评论0 收藏0

发表评论

登陆后可评论

0条评论

3403771864

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<