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='https://www.jb51.net/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='https://www.jb51.net/images/right-icon.png' mode="widthFix"></image> </view> </view> </view> <!-- 部门列表 --> <view wx:if="{{isDep}}"> <view> <view> <text>部门</text> <!-- <text 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 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 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> <text>人员</text> </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>{{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 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