uniapp实现下拉自定义筛选

组件没法满足自定义筛选，还是手写吧

直接上代码

<template>
	<view>
		<view style="height: 44px;background-color: #F8F8F8;text-align: center;line-height: 44px;">
			订单审批
		</view>
		<view>
			<view style="text-align: right;border-bottom: 1px solid #F5F5F5;height: 50rpx;line-height: 50rpx;">
				<view @click="isShowCilck" style="color: #554BBB;font-size: 20rpx;">
					<text style="display: inline-block;margin-right: 4rpx;">筛选</text>
					<u-icon v-if="isDialogShow==true" style="display: inline-block;margin-right: 15rpx;" color="#554BBB" name="arrow-up">
					</u-icon>
					<u-icon v-else style="display: inline-block;margin-right: 15rpx;" color="#554BBB" name="arrow-down">
					</u-icon>
				</view>
			</view>
			<view class="search_box">
				<view class="search_dialog" v-if="isDialogShow" @click.stop="isDialogShow=false">
					<div class="dialog_box"> 自定义搜索 </div>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isDialogShow: false,
			}
		},
		onLoad() {},
		onShow() {},
		methods: {
			// 显示弹窗
			isShowCilck() {
				this.isDialogShow = !this.isDialogShow
			},
		}
	}
</script>

<style lang="scss">
	.search_box {
		position: relative;
		.search_dialog {
			font-size: 28rpx;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background: rgba(0, 0, 0, .2);
			.dialog_box {
				background: #FBFBFB;
				height: calc(100vh - 700rpx);
				border-radius: 0rpx 0rpx 40rpx 40rpx;
				text-align: center;
				display: flex;
				width: 100%;
				position: relative;
			}
		}
	}
</style>

这样就好啦，直接粘贴复制即可