微信小程序线上制作_微信小程序 自界说复选框完

摘要: 手机微信微信小程序 自定勾选框完成编码案例 本文关键详细介绍了手机微信微信小程序 自定勾选框完成编码案例,原文中根据实例编码详细介绍的十分详尽,对大伙儿的学习培训...

微信小程序 自定义复选框实现代码实例       这篇文章主要介绍了微信小程序 自定义复选框实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

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

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

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

index.wxml布局

 view 
 view bindtap='isDep' 
 view 
 text /text 
 text 开放部门 /text 
 /view 
 view 
 text 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 bindtap='isPer' 
 view 
 text /text 
 text 开放成员 /text 
 /view 
 view 
 text 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 

text 部门 /text !-- text class='{{navId==2 "active":""}}' data-id='2' bindtap='getNav' 人员 /text -- /view view scroll-view scroll-y scroll-top="{{scrollTop}}" checkbox-group bindchange="checkboxChange" 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 button bindtap='cancel' 取消 /button button class='' bindtap='confirm' 确定 /button /view /view /view !-- 成员列表 -- view wx:if="{{isPer}}" view !-- 字母锚点 -- view view bindtap="jumpTo" wx:for="{{words}}" wx:key="i" data-opt="{{item}}" {{item}} /view /view
view scroll-view scroll-y scroll-with-animation='true' scroll-top="{{scrollTop}}" scroll-into-view="{{toView}}" view checkbox-group bindchange="checkBoxPer" view wx:for="{{personnelArr}}" wx:key="index" wx:for-item="itemName" wx:for-index="itemNameInd" view id="{{itemName.name}}" {{itemName.name}} /view label 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 button 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;

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中


联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 400-000-8888