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

网络编程 2024/11/16 佚名

3 1 2

功能：　

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

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

微信小程序,自定义复选框

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

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

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

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

layui使用button按钮点击出现弹层弹层中加载表单的实例

layui弹出框Tab选项卡的示例代码

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

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

layui使用button按钮 点击出现弹层 弹层中加载表单的实例

layui弹出框Tab选项卡的示例代码

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

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

layui使用button按钮点击出现弹层弹层中加载表单的实例

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

RTX 5090要首发性能要翻倍！三星展示GDDR7显存