<button bindtap="openFlag">可搜索选择框</button>

<view class="date-background" hidden="{{flag}}">
  <view class='date-gray-background' bindtap='hiddeDatePicker'></view>
  <view class='date-container'>
    <view class="transparent">
      <view class='date-confirm'>
        <view bindtap='hiddeDatePicker'>取消</view>
        <van-search
          value="{{searchValue}}"
          input-align="center"
          placeholder="请输入学生电话号码"
          bind:change="searchSchool"
        />
        <view bindtap='confirm'>确定</view>
      </view>
      <picker-view
        indicator-class="indicator"
        value="{{setValues}}"
        bindchange="bindChange"
        bindpickend="_bindpickend"
        indicator-style="height: 100rpx;"
        mask-style="height:900rpx;"
        style="width: 100%; height: 90%;position:absolute;bottom:0rpx;text-align:center;background:white"
      >
 
        <picker-view-column class="pickViewColumn">
          <view wx:for="{{items}}" wx:key="id" style="line-height: 104rpx">{{item.userName}}</view>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</view>

/* pages/newstudents/newstudents.wxss */

 .date-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.date-gray-background {
  position: absolute;
  width: 100%;
  top: 0;
  background: rgba(0, 0, 0, .5);
  height: calc(100% - 500rpx);
}
.date-container {
  position: absolute;
  width: 100%;
  height: 900rpx;
  overflow: hidden;
  background: #fff;
  bottom:0;
  z-index: 1000;
}

.date-confirm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:0 20rpx;
  font-size:34rpx;
  line-height: 70rpx;
  color:var(--ThemeColor)
}
.pickViewColumn{
  height: 900rpx;
  margin-top: -300rpx;
}
.indicator{
height: 80rpx;
border: 1rpx solid #E5E8E8;
}

const app = getApp();

Page({
  data: {
      //控制picker的显示与隐藏
  flag: false,
      // 用户输入的学校关键词
        // 滚动选择的学校
  setValues: [],
  items: [],
  // 滚动选择的学校索引
  selectSchoolIndex:'',
  searchValue:'',

  },
  onLoad: function (options) {
  console.log('onLoad-----------------:') 
 
  },


  searchSchool(e){
      console.log("搜索==========",e.detail)
  },

  //用户滚动picker时，获取滚动选择的索引
  bindChange(e){
    this.setData({
      // 用户选择的学校索引
      selectSchoolIndex:e.detail.value[0]
    })
    console.log("-----------------------选择 ：",e.detail.value[0])
  },

  //确定
  confirm(){
    console.log("-----------------------选择 确定 ")
    this.setData({   
      flag:true
    })
  },
//打开弹框
  openFlag(){
    console.log("打开弹框")
    this.setData({
      flag:false,
    })
  },
  //取消
  hiddeDatePicker(){
    console.log("取消")
    this.setData({  
      flag:true
    })
  },
 
 })