微信小程序实现类似picker多选

版本迭代picker单选改为多选，官方文档只有多列选择器没有多选，自己写呗
最终实现效果图

实现思路：
1.自己画模态框
2.遍历初始数据push新增参数checked:false
3.点击改变checked值来实现多选

上代码：
whtml：modalName变量控制模态框显隐

 <view class="picker flex" bindtap='radioChange'>
          <view class="cen">等级 <view class="countnum" wx:if="{{checkNum>0}}">{{checkNum}}</view>
          </view>
          <image class="img" mode="widthFix" src="/images/icon-arrow-select.png"></image>
</view>


<view class="modal-box {{modalName?'cur':''}}">
      <view class='modal-dialog'>
        <view class="checkbox_box">
          <view class="check_top">
            <view class="check_tit">等级选择（可多选）</view>
            <view class="check_list">
              <view class="check_item {{item.checked?'checked':''}}" wx:for="{{grade}}" wx:key="index" bindtap="multiple"
                data-value="{{item.value}}">{{item.key}}
                <image class="checkimg" wx:if="{{item.checked}}" src="/images/check.png"></image>
              </view>
            </view>
          </view>
          <view class="check_btn">
            <view class="qk" bindtap='closeModal'>清空</view>
            <view class="confirm" bindtap="checkConfirm">确定 <view class="countnum2" wx:if="{{checkNum>0}}">({{checkNum}})</view></view>
          </view>
        </view>
      </view>
</view>

js

   data:{
	hospitalLevel: [],//医院等级
	grade :[
	  {
	    key: '三级甲等',
	    value: '301',
	    checked: false
	  },
	  {
	    key: '三级乙等',
	    value: '302',
	    checked: false
	  },
	  {
	    key: '三级丙等',
	    value: '303',
	    checked: false
	  },
	  {
	    key: '二级甲等',
	    value: '201',
	    checked: false
	  },
	  {
	    key: '二级乙等',
	    value: '202',
	    checked: false
	  },
	  {
	    key: '二级丙等',
	    value: '203',
	    checked: false
	  },
	  {
	    key: '一级甲等',
	    value: '101',
	    checked: false
	  },
	  {
	    key: '一级乙等',
	    value: '102',
	    checked: false
	  },
	  {
	    key: '一级丙等',
	    value: '103',
	    checked: false
	  },
	],
    modalName: false,//模态框显隐
    checkNum: 0,//选中数量
   }
  /*显示弹窗*/
  radioChange: function () {
    var that = this;
    that.setData({
      modalName: !that.data.modalName,
    })
  },
  //关闭弹窗
  closeModal: function (e) {
    var that = this;
    var nowgrade = that.data.grade
    nowgrade.map(item => {
      item.checked = false
    })
    that.setData({
      grade: nowgrade,
      checkNum: 0,
    })
  },
  //点击选择
  multiple: function (e) {
    var that = this;
    var value = e.currentTarget.dataset.value
    var nowgrade = that.data.grade
    var checkNum = []
    nowgrade.map(item => {
      if (item.value == value) {
        item.checked = !item.checked
      }
      if (item.checked == true) {
        checkNum.push('ok')
      }
    })
    that.setData({
      grade: nowgrade,
      checkNum: checkNum.length
    })
  },
  //点击确定走接口
  checkConfirm: function () {
    var that = this;
    var nowgrade = that.data.grade
    var paramsData = []
    nowgrade.map(item => {
      if (item.checked == true) {
        paramsData.push(item.value)
      }
    })
    that.setData({
      hospitalLevel: paramsData,
      pageNum: 1,
      modalName: false,
    })
    this.fetch()//请求
  },
  

wxss:

/* --------多选-start------- */
/* 模态框显示时 禁止后面div滚动 */ 
.isfixed{ 
  position: fixed;
  top:0;
  left:0;

}
.modal-box {
  position: fixed;
  top: 173rpx;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1110;
  opacity: 0;
  outline: 0;
  text-align: center;
  -ms-transform: scale(1.185);
  transform: scale(1.185);
  backface-visibility: hidden;
  perspective: 1000px;
  background: rgba(0, 0, 0, .6);
  transition: all .6s ease-in-out 0;
  pointer-events: none
}

.modal-box.cur {
  opacity: 1;
  transition-duration: .3s;
  -ms-transform: scale(1);
  transform: scale(1);
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto
}

.modal-dialog {
  position: relative;
  top: 0;
  left: 0;
  /* display: inline-block;
  vertical-align: middle; */
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  background: #fff;
}

.checkbox_box {
  background: #fff;
  border-top: 1rpx solid #DDE1E7
}

.check_top {
  padding: 36rpx;
  padding-right: 0
}

.check_tit {
  margin-bottom: 5rpx;
}

.check_tit {
  font-size: 24rpx;
  font-family: 'PingFang SC';
  font-weight: 400;
  color: #999999;
  text-align: left;
}

.check_list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.check_item {
  width: 200rpx;
  height: 64rpx;
  margin-right: 36rpx;
  margin-top: 20rpx;
  background: #F4F5F9;
  border-radius: 6rpx;
  text-align: center;
  line-height: 64rpx;
  position: relative;
}

.checkimg {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  width: 24rpx;
  height: 24rpx;

}

.check_btn {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #DCE1E8;
  /* display: none; */
}

.checked {
  background: #DBE9FC;
  color: #1E79EC;
}

.qk {
  width: 50%;
  height: 92rpx;
  background: #FFFFFF;
  text-align: center;
  line-height: 92rpx;
  font-size: 32rpx;
  font-family: 'PingFang SC';
  font-weight: 500;
  color: #666666;

}

.confirm {
  width: 50%;
  height: 92rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1E79EC;
  text-align: center;
  line-height: 92rpx;
  font-size: 32rpx;
  font-family: 'PingFang SC';
  font-weight: 500;
  color: #FFFFFF;

}

.cen {
  display: flex;
  align-items: center;
}

.countnum {
  width: 26rpx;
  height: 26rpx;
  font-size: 20rpx;
  border: 2rpx solid #1E79EC;
  border-radius: 50%;
  text-align: center;
  line-height: 26rpx;
  color: #1E79EC;
  margin-left: 8rpx;
}

.countnum2 {
  margin-left: 6rpx;
  font-size: 32rpx;
  font-family: 'PingFang SC';
  font-weight: 500;
  color: #FFFFFF;

}

/* -----------------end------------------ */