Adjust the style according to your needs
Component part:
<template> <view class=""> <!-- query start--> <view class="date-background" v-show="flag"> <view class='date-gray-background' @click="hiddeDatePicker"></view> <view class='date-container'> <view class="transparent"> <view class='date-confirm'> <view @click="hiddeDatePicker" class="pickerCancel">Cancel</view> <u--input cursorSpacing='500' v-model="searchValue" placeholder="Please enter the student number or name to search" border="surround" @change='searchChange'></u--input> <view @click="confirm1" class="pickerConfirm">OK</view> </view> <picker-view indicator-class="indicator" :value="setValues" @change="bindChange" indicator-style="height: 70rpx;" mask-style="height: 900rpx;" style="width: 100%; height: 80%; position: absolute; bottom: 0rpx; text-align: center; background: white"> <picker-view-column class="pickViewColumn"> <view v-for="item in dataSource" :key="item.xh" style="line-height: 68rpx"> {<!-- -->{item.xm}}({<!-- -->{item.xh}}) </view> </picker-view-column> </picker-view> </view> </view> </view> <!-- query end --> </view> </template> <script> import xsqjService from "@/api/xsqj/xsqjService" export default { props: { /** * The value displayed by picker by default is not used at present, and the default value currently used is setValues */ value: { type: Array, default () { return [0] } }, }, components: {}, data() { return { dataSource: [], dataSourceCopy: [], flag: false, searchValue: '', // search value setValues: [6], // picker selection value, the boss requires the selected box to be in the middle, so my default selected subscript is 6 inputForm: { xh: '', xm: '' } } }, created() { this.getXs() //I put the interface in the component to get it, because the data passed from the parent component is too slow, which will lead to no data when the page is opened for the first time }, methods: { // get students async getXs() { uni. showLoading({ title: 'Loading' }) const res = await xsqjService. getxslist(); this.dataSource = res; this.dataSourceCopy = res; this.dataSource.forEach((item, index) => { if (this. setValues[0] == index) { this.inputForm.xh = item.xh; this.inputForm.xm = item.xm } }); uni.hideLoading() }, \t\t\t// Inquire pinpaiFun() { this.flag = true; }, // scroll subscript bindChange(e) { console.log(e.detail.value.toString()); let value = e.detail.value.toString(); this.dataSource.forEach((item, index) => { if (value == index) { this.inputForm.xh = item.xh; this.inputForm.xm = item.xm } }); }, hiddenDatePicker() { this.flag = !this.flag }, showDatePicker() { this.flag = !this.flag }, confirm1(e) { this.flag = !this.flag; this. $emit('recload', this. inputForm); }, // search query searchChange(e) { // fuzzy search, you can also use interface query if (this. searchValue) { this.dataSource = this.dataSourceCopy.filter((item) => { if (item. xh. indexOf(e) > -1 || item. xm. indexOf(e) > -1) { return true } }) if (this. dataSource. length > 0) { this. setValues = [6] this.dataSource.forEach((item, index) => { if (this. setValues[0] == index) { this.inputForm.xh = item.xh; this.inputForm.xm = item.xm } }); } else { this.inputForm.xh = ''; this.inputForm.xm = '' } } else { this.dataSource = this.dataSourceCopy this. setValues = [6] this.dataSource.forEach((item, index) => { if (this. setValues[0] == index) { this.inputForm.xh = item.xh; this.inputForm.xm = item.xm } }); } } }, } </script> <style lang='scss' scoped> .date-background { position: fixed; left: 0; top: 0; bottom: 0; width: 100%; height: 100%; z-index: 2; } .date-gray-background { position: absolute; width: 100%; top: 0rpx; background: rgba(0, 0, 0, .5); height: calc(100% - 500rpx); } .chaxunjieguo { width: 100%; height: 500rpx; overflow: scroll; color: black; } .chaxunjieguo text { display: block; text-align: center; padding-bottom: 10rpx; } .date-container { position: absolute; width: 100%; height: 960upx; overflow: hidden; background: #fff; bottom: 0; z-index: 1000; } .date-confirm { display: flex; justify-content: space-between; align-items: center; padding: 20rpx; font-size: 34rpx; line-height: 100rpx; z-index: 2; //line-height: 70rpx; // color: var(--ThemeColor) } .pickViewColumn { height: 900rpx; /* margin-top: -300rpx; */ } .indicator { height: 80rpx; /* border: 1rpx solid #E5E8E8; */ } .pickerCancel { font-size: 30rpx; color: #777; margin-right: 30rpx; } .pickerConfirm { font-size: 30rpx; color: #4C83D6; margin-left: 30rpx; } </style>
use:
<template> <view> <u-form-item label="Student ID:" prop="xh" borderBottom> <view class="ruku"> <view class="formbox"> <view class="formitem flex_align_center"> <view class="forminput" @click="searchxh"> <text v-if="inputForm.xh">{<!-- -->{inputForm.xh}}</text> <text class="graytext" v-else> Please select your student number </text> </view> </view> <!-- 1. Component use --> <studentPicker :value="defaultValue" ref="studentPicker" @recload='getbrand'> </studentPicker> </view> </view> </u-form-item> <u-form-item label="Name:" prop="xm" borderBottom> <u--input disabled v-model="inputForm.xm" border="none"></u--input> </u-form-item> </view> </template> <script> export default { data() { return { inputForm: { xm:'', xh:'' } defaultValue:[0], // default value } }, methods: { // student number query searchxh() { this.$refs.studentPicker.showDatePicker(); }, // Receive the value of the parent component getbrand(data) { this.inputForm.xm = data.xm; this.inputForm.xh = data.xh; }, } } </script> <style lang="scss"> .formbox.formitem { margin-bottom: 10rpx; } .formbox .formitem .formlabel { width: 180upx; color: #666666; font-size: 28upx; } .formbox.formitem.forminput { border-radius: 10upx; border: 1rpx solid #e5e5e5; width: 350rpx; height: 70rpx; line-height: 70rpx; padding-left: 24rpx; } .formbox .formitem .forminput .downimg { position: absolute; right: 16rpx; top: 25%; width: 32rpx; height: 32rpx; } .formbox .formupbox .formlabel { width: 100%; height: 100%; } .formbox.formupbox.formupload { margin-top: 22rpx; } .formbox .form_input .u-input { width: 490rpx; height: 70rpx; line-height: 70rpx; } .formbox.textarea { width: 490rpx; border: 1rpx solid #DBDBDB; border-radius: 8rpx; padding: 10rpx 15rpx; font-size: 30rpx; } .formbox.placeholderStyle { color: #c0c4cc; font-size: 30rpx; } .formbox /deep/textarea, .formbox /deep/.uni-textarea-wrapper { width: 460rpx !important; } .flex_align_center { display: flex; align-items: center; } </style>