当前位置：移动技术网 > IT编程>开发语言>JavaScript > 微信小程序自定义复选框实现代码实例

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

2019年09月06日 | 移动技术网IT编程 | 我要评论

功能：　

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)
 },
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

JS--常见面试题整理(附答案）

一.JS面试题1.当a=?时，可以让a同时满足a1,a2,a==3,并输出ok方法一let a=[1,2,3];... [阅读全文]
javascript的短路机制和几种数值取整的方法

1. javascript的短路机制1.1 且运算符（&&）往往用于多个表达式的求值。它的运算规... [阅读全文]
jQuery50个选择器,让你得心应手

jQuery一:概念一个简单的js组件(是一个别人写好的js文件不是jar包)引入jQuery文件<scr... [阅读全文]
JavaScript 好题汇总分享（持续更新，看到好题就写）

前言本文搜集的题目，均来自各大网课、面试题等预编译相关1a = 100;function demo(e) {fu... [阅读全文]
JS中的原型与原型链图解

原型每一个构造器（函数）上面都有一个属性叫prototype，称为原型。它的值是一个对象，这个对象我们称为原型对... [阅读全文]
XMLHttpRequest 2级 &&进度事件&&JSONP

XMLHttpRequest 2级FormDataFormData 为序列化表单以及创建与表单格式相同的数据（... [阅读全文]
XMLHttpRequest对象

AJAX简介AJAX = 异步 JavaScript 和 XML；是一种用于创建快速动态网页的技术。通过在... [阅读全文]
mock入门学习

mockjs入门学习,自动生成数据官网入口：http://mockjs.com/安装：npm i mockjs ... [阅读全文]
使用递归原生实现拷贝&&最简单的方法实现深拷贝

<script> // 第一种:最简单的方法,一行代码实现 JSON.p... [阅读全文]
【剑指 Offer 45】把数组排成最小的数

输入一个非负整数数组，把数组里所有数字拼接起来排成一个数，打印能拼接出的所有数字中最小的一个。示例 1:输入: ... [阅读全文]

网友评论


验证码：

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

2019年09月06日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论

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