uniapp页面需要一个点击下拉的效果，将时间记录下来，留待复用。

使用组件

<typeSeleted :gridId.sync="data.gridId"></typeSeleted>

组件代码

/**
* @Author: 858834013@qq.com
* @Name: typeSeleted
* @Date: 2022-12-18
* @Desc: typeSeleted
*/
<template>
	<div class="typeSeleted">
		<div class="typeSeletedInner" @click="getShow">
			<div class="typeSeletedInnerl">
				{{title}}
			</div>
			<div class="typeSeletedInnerr">
				<image src="../../static/login/icon_down.png" mode=""></image>
			</div>
		</div>
		<div class="seleteList" v-if="show">
			<div class="seleteListItem" @click="getSeleted(item)" v-for="(item,index) in list" :key="index">
				<text>{{item.title}}</text>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "typeSeleted",
		props: {
			gridId: {
				type: Number,
				default () {
					return 0;
				}
			},
		},
		computed: {
			title: function() {
				var title = '请选择地区'
				this.list.forEach((type) => {
					if (type.gridId == this.gridId) {
						title = type.title
					}
				});
				return title
			}
		},
		data() {
			return {
				show: false,
				list: [{
					title: '锦绣街道1',
					gridId: 1,
				}, {
					title: '锦绣街道2',
					gridId: 2,
				}, {
					title: '锦绣街道',
					gridId: 1,
				}, {
					title: '锦绣街道',
					gridId: 1,
				}, {
					title: '锦绣街道',
					gridId: 1,
				}, {
					title: '锦绣街道',
					gridId: 1,
				}, {
					title: '锦绣街道',
					gridId: 1,
				}, ]
			};
		},
		methods: {
			getShow() {
				this.show = !this.show
			},
			getSeleted(e) {
				this.$emit('update:gridId', e.gridId)
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.typeSeleted {
		width: 500rpx;
		height: 100rpx;
		background: #E7461E;
		border-radius: 50rpx;
		position: relative;
		z-index: 100;

		.typeSeletedInner {
			width: 500rpx;
			position: relative;
			display: flex;
			z-index: 1;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			height: 100rpx;

			.typeSeletedInnerl {
				margin-left: 60rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: nowrap;
				flex-direction: row;
				align-content: flex-start;
			}

			.typeSeletedInnerr {
				margin-right: 56rpx;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: nowrap;
				flex-direction: row;
				align-content: flex-start;

				image {
					width: 16rpx;
					height: 10rpx;
				}
			}
		}
	}

	.seleteList {
		width: 500rpx;
		position: absolute;
		border-radius: 50rpx;
		background: rgba(231, 70, 30, 1.00);
		padding-top: 100rpx;
		top: 0;
		z-index: 0;

		.seleteListItem {
			height: 70rpx;

			text {
				margin-left: 60rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>