微信小程序 自定义复选框实现代码实例


Posted in Javascript onSeptember 04, 2019

功能: 

1、需要多选复选框,并且可以上拉滚动;

2、需要通过名称手写字母排序的,并且可以上拉滚动;

常规的小程序自带的原生picker无法满足我们的要求,因此一些特殊效果需要我们自定义来实现,废话不多说,我们直接看效果:

微信小程序 自定义复选框实现代码实例

微信小程序 自定义复选框实现代码实例

微信小程序 自定义复选框实现代码实例

微信小程序 自定义复选框实现代码实例

index.wxml布局

<view class="container">
 <view class='class bgFFF' bindtap='isDep'>
  <view class='class-text'>
    <text class='red'> </text>
    <text>开放部门</text>
   </view>
  <view class='class-choose'>
   <text class='color333 perItem' wx:if="{{checkValue.length>0}}">
    <block wx:for="{{checkValue}}" wx:key="index"> {{item}} </block>
   </text>
   <text wx:else>默认全部</text>
   <image src='/images/right-icon.png' mode="widthFix"></image>
  </view>
 </view>
 <view class='class bgFFF' bindtap='isPer'>
  <view class='class-text'>
    <text class='red'> </text>
    <text>开放成员</text>
   </view>
  <view class='class-choose'>
   <text class='color333 perItem' wx:if="{{depValue.length>0}}">
    <block wx:for="{{depValue}}" wx:key="index"> {{item}} </block>
   </text>
   <text wx:else>默认全部</text>
   <image src='/images/right-icon.png' mode="widthFix"></image>
  </view>
 </view>
</view>


<!-- 部门列表 -->
<view class='typeListBox' wx:if="{{isDep}}">
 <view class='wrap'>
  <view class='nav'>
   <text class='active'>部门</text>
   <!-- <text class='{{navId==2?"active":""}}' data-id='2' bindtap='getNav'>人员</text> -->
  </view>
  <view class='checkbox-con'>
   <scroll-view scroll-y style="height: 700rpx;" scroll-top="{{scrollTop}}">
    <checkbox-group bindchange="checkboxChange" class="checkbox-group">
     <view wx:for="{{checkboxArr}}" wx:key="item.name">
      <label class="{{item.checked?'checkbox checked':'checkbox'}}" bindtap='checkbox' data-index="{{index}}">
       <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.name}}
      </label>
     </view>
    </checkbox-group>
   </scroll-view>
  </view>
  <view class='btn1'>
   <button class='bgFFF' bindtap='cancel'>取消</button>
   <button class='' bindtap='confirm'>确定</button>
  </view>
 </view>
</view>

<!-- 成员列表 -->
<view class='typeListBox' wx:if="{{isPer}}">
 <view class='wrap'>
   <!-- 字母锚点 -->
   <view class='anchor'>
    <view bindtap="jumpTo" wx:for="{{words}}" wx:key="i" data-opt="{{item}}">{{item}}</view>
   </view>


  <view class='nav'>
   <text class='active'>人员</text>
  </view>
  <view class='checkbox-con'>
   <scroll-view scroll-y style="height: 700rpx;" scroll-with-animation='true' scroll-top="{{scrollTop}}" scroll-into-view="{{toView}}">
    <view class='typeList'>
     <checkbox-group class="radio-group" bindchange="checkBoxPer">
      <view wx:for="{{personnelArr}}" wx:key="index" wx:for-item="itemName" wx:for-index="itemNameInd">
       <view class='typeList-item-title' id="{{itemName.name}}">{{itemName.name}}</view>
       <label class='typeList-item' data-itemnameind='{{itemNameInd}}' bindtap="checkPer" wx:for="{{itemName.a}}" wx:key="a" wx:for-item="item" data-index="{{index}}">
        <checkbox value="{{item.name}}" checked="{{item.checked}}" color='#3eace2'/>
        <text>{{item.name}}</text>
       </label>
      </view>
     </checkbox-group>
    </view>
   </scroll-view>
  </view>
  <view class='btn1'>
   <button class='bgFFF' bindtap='cancel'>取消</button>
   <button class='' bindtap='confirmPer'>确定</button>
  </view>
 </view>
</view>

index.wxss样式

.container {
 display: flex;
 flex-direction: column;
 box-sizing: border-box;
 background-color: #f5f5f5;
 padding-top: 20rpx;
} 

.class{
 display: flex;
 flex-direction: row;
 padding: 20rpx 0;
 background-color: #fff;
 margin-bottom: 20rpx;
}
.class view.class-text{
 flex: 1;
 padding-left: 30rpx;
 font-size: 14px;
}
.red{
 margin-right: 10rpx;
 color: #ff0000;
}
.class-choose{
 max-width: 60%;
 display: flex;
 flex-direction: row;
 text-align: right;
}
.class-choose-item{
 display: flex;
 flex-direction: column;
 padding-right: 40rpx;
}
.class-choose text{
 flex: 1;
 font-size: 14px;
 color: #999;
}
.class-choose text.color333{
 color: #333;
}
.class-choose image{
 width: 16px;
 margin: 6rpx 20rpx 0;
}


/* 部门列表样式 */
.typeListBox{
 z-index: 101;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 padding: 50rpx;
 background: rgba(0,0,0,0.3);
}
.typeList{
 /* margin-top: 200rpx; */
 padding: 0 30rpx;
 border-radius: 5px;
 font-size: 13px;
 background-color: #fff;
}
.typeList .radio-group{
 display: flex;
 flex-direction: column;
}
.typeList-item{
 display: flex;
 flex-direction: row;
 padding: 20rpx 0;
 border-bottom: 1rpx solid #f5f5f5;
}
.typeList-item text{
 margin-left: 10rpx;
 line-height: 48rpx;
}
.radio{
 padding: 0 20rpx 0 0;
}
.engineer{
 padding: 0 20rpx 0 0;
}
.engineer-text{
 line-height: 46rpx;
}
.engineer-item{
 padding: 10rpx 0;
}

.nav{
 display: flex;
 flex-direction: row;
 border-bottom: 1rpx solid #f5f5f5;
}
.nav text{
 padding: 20rpx;
 flex: 1;
 text-align: center;
 font-size: 16px;
}
.nav text.active{
 color: #3eace2;
 border-bottom: 1rpx solid #3eace2;
}.wrap{
 padding: 20rpx 30rpx;
 border-radius: 5px;
 font-size: 13px;
 background-color: #fff;
 position: relative;
}
 
.checkbox-con{
 margin: 50rpx auto;
 text-align: center;
 position: relative;
}
.checkbox-group view{
 float: left;
 width: 50%;
 display: flex;
 flex-direction: column;
 padding: 0 20rpx 40rpx;
 box-sizing: border-box;
}
.checkbox{
 flex: 1;
 height: 72rpx;
 line-height: 72rpx;
 font-size: 28rpx;
 color: #888888;
 border: 1rpx solid #CECECE;
 border-radius: 5rpx;
 /* display: inline-block; */
 /* margin: 0 10rpx 30rpx 0; */
 position: relative;
}
/* .checkbox-group{
 display: flex;
 flex-direction: row;
} */
.checked{
 color: #3eace2;
 background: rgba(49,165,253,0.08);
 border: 1rpx solid #3eace2;
}
.checkbox checkbox{
 display: none
}
.checked-img{
 width: 28rpx;
 height: 28rpx;
 position: absolute;
 top: 0;
 right: 0
}
.btn1{
 display: flex;
 flex-direction: row;
}
.btn1 button{
 flex: 1;
 background-color: #3eace2;
 color: #fff;
}
.btn1 button.bgFFF{
 margin-right: 20rpx;
 color: #666;
 background-color: #fff;
}
.perItem{
 box-sizing: border-box;
 text-overflow: ellipsis;
 white-space: nowrap;
 overflow: hidden;
}
.anchor{
 z-index: 101;
 position: absolute;
 top: 150rpx;
 right: 20rpx;
 font-size: 12px;
}
.anchor view{
 padding: 0 5rpx;
 text-align: center;
}
.typeList-item-title{
 padding: 10rpx 10rpx 5rpx;
 color: #666;
 background-color: #f5f5f5;
 text-align: left;
}

index.js

const app = getApp()
Page({
 data: {
  checkboxArr: [
   {
    checked: false,//是否选中
    id: "1",//部门能id
    name: "部门1",
   },
   {
    checked: false,//是否选中
    id: "2",//部门能id
    name: "部门2",
   },
   {
    checked: false,//是否选中
    id: "3",//部门能id
    name: "部门3",
   },
   {
    checked: false,//是否选中
    id: "4",//部门能id
    name: "部门4",
   },
   {
    checked: false,//是否选中
    id: "5",//部门能id
    name: "部门5",
   },
   {
    checked: false,//是否选中
    id: "6",//部门能id
    name: "部门6",
   },
   {
    checked: false,//是否选中
    id: "7",//部门能id
    name: "部门7",
   },
   {
    checked: false,//是否选中
    id: "8",//部门能id
    name: "部门8",
   },
   {
    checked: false,//是否选中
    id: "9",//部门能id
    name: "部门9",
   },
   {
    checked: false,//是否选中
    id: "10",//部门能id
    name: "部门10",
   },
   {
    checked: false,//是否选中
    id: "11",//部门能id
    name: "部门11",
   },
   {
    checked: false,//是否选中
    id: "12",//部门能id
    name: "部门12",
   },
   {
    checked: false,//是否选中
    id: "13",//部门能id
    name: "部门13",
   },
   {
    checked: false,//是否选中
    id: "14",//部门能id
    name: "部门14",
   },
   {
    checked: false,//是否选中
    id: "15",//部门能id
    name: "部门15",
   },
  ],//部门列表
  personnelArr: null,//人员列表
  checkValue: [],//部门
  depValue: [],//部门
  isDep: false,//部门显隐
  isPer: false,//成员显隐
  d_id: [],//部门id集合
  u_id: [],//人员集合
  words: null,//成员名称的手写字母
 },

 //控制部门的显隐
 isDep: function () {
  this.setData({
   isDep: true,
  })
 },
 
 //控制人员显隐
 isPer: function () {
  this.setData({
   isPer: true,
  })
 },

 //取消按钮
 cancel: function () {
  this.setData({
   isDep: false,
   isPer: false
  })
 },

 //人员
 checkPer: function (e) {
  var index = e.currentTarget.dataset.index;//获取当前点击的下标
  var ind = e.currentTarget.dataset.itemnameind;//获取当前点击的下标
  var personnelArr = this.data.personnelArr;//选项集合
  personnelArr[ind].a[index].checked = !personnelArr[ind].a[index].checked;//改变当前选中的checked值

  // var u_id = this.data.u_id;//获取data中的成员id集合
  // var id = personnelArr[ind].a[index].id;//获取选中的成员id
  // //判断,当前选中的这个值的checked是不是已经选中,如果是则将id放入选中成员id集合,反之则移除
  // if (personnelArr[ind].a[index].checked) {
  //  u_id.push(id);
  // } else {
  //  this.removeByValue(u_id, id);
  // }

  this.setData({
   personnelArr: personnelArr
  });
 },
 checkBoxPer: function (e) {
  var depValue = e.detail.value;
  this.setData({
   depValue: depValue
  });
 },
 confirmPer: function () {// 提交
  this.setData({
   isPer: false,
  })
 },

 //部门
 checkbox: function (e) {
  var index = e.currentTarget.dataset.index;//获取当前点击的下标
  var checkboxArr = this.data.checkboxArr;//选项集合
  checkboxArr[index].checked = !checkboxArr[index].checked;//改变当前选中的checked值

  //如果需要部门联动成员
  // var d_id = this.data.d_id;//获取data中的部门id集合
  // var id = checkboxArr[index].id;//获取选中的部门id
  // //判断,当前选中的这个值的checked是不是已经选中,如果是则将id放入选中部门id集合,反之则移除
  // if (checkboxArr[index].checked) {
  //  d_id.push(id);
  // } else {
  //  this.removeByValue(d_id, id);
  // }

  this.setData({
   checkboxArr: checkboxArr
  });
 },
 checkboxChange: function (e) {
  var checkValue = e.detail.value;
  this.setData({
   checkValue: checkValue
  });
 },
 confirm: function () {// 确定
  this.setData({
   isDep: false,
   // depValue: []如果是联动,选中部门后需要清除选中的成员
  })
  // this.getUser();//通过选中部门来获取不通的部门成员,将获取到的数据存入checkboxArr中
 },

 
 onLoad: function () {
  //模拟测试人员数据
  var arr = {
   data: [
    {
     checked: false,
     id: "83",
     name: "张三",
     word: "Z",
    }, {
     checked: false,
     id: "22",
     name: "张三丰",
     word: "Z",
    }, {
     checked: false,
     id: "23",
     name: "张无忌",
     word: "Z",
    }, {
     checked: false,
     id: "83",
     name: "李四",
     word: "L",
    }, {
     checked: false,
     id: "83",
     name: "王五",
     word: "W",
    }, {
     checked: false,
     id: "83",
     name: "测试",
     word: "C",
    },
   ],//成员数组
   words: ["C", "L", "W", "Z"],//成员字母集合
  };
  this.setData({
   words: arr.words,
  })
  this.integration(arr)
 },


 // 整合人员字母
 integration: function (list) {
  // console.log(list)
  var arr = [];
  for (var j = 0; j < list.words.length; j++) {
   var aa = {
    name: null,
    a: []
   };
   aa.name = list.words[j];
   for (var k = 0; k < list.data.length; k++) {
    if (list.words[j] == list.data[k].word) {
     aa.a.push(list.data[k]);
    }
   }
   arr.push(aa)
  }
  this.setData({
   personnelArr: arr,
  })
  // console.log(arr)
 },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
Javascript动画的实现原理浅析
Mar 02 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
小程序实现长按保存图片的方法
Dec 31 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
vue实现简易音乐播放器
Aug 14 Vue.js
layui弹出框Tab选项卡的示例代码
Sep 04 #Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 #Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 #Javascript
微信小程序按钮点击动画效果的实现
Sep 04 #Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 #Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 #Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 #Javascript
You might like
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
初步认识Python中的列表与位运算符
2015/10/12 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
Mac 上切换Python多版本
2017/06/17 Python
python分析作业提交情况
2017/11/22 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
Python assert语句的简单使用示例
2019/07/28 Python
Python 实现自动导入缺失的库
2019/10/29 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
护理专业自荐信
2013/12/03 职场文书
高三英语教学反思
2014/01/13 职场文书
小学敬老月活动方案
2014/02/11 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
在职员工证明书
2014/09/19 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
Python实现智慧校园自动评教全新版
2021/06/18 Python
golang中的struct操作
2021/11/11 Golang