uni-app 半屏地图拖拽滚动底部半屏，仿高德搜索拖拽

<template>
	<view class="event-help-details">
		<view class="back-last-page" :style="'top: ' + navTabtop + 'px'" @click="goBackPage">
			<u-icon name="arrow-left" color="#030303" size="20"></u-icon>
		</view>
		<view class="map-content" :style="'height:' + mapHeight + 'px'">
			<map class="map-gis" id="mapGis" ref="mapGis" :show-scale="true" :enable-poi="true" :show-location="false"
				:enable-building="true" :enable-3D="true" :enable-rotate="true" :enable-indoorMap="true"
				:scale="mapObj.scale" :longitude="mapObj.longitude" :latitude="mapObj.latitude"
				:markers="mapMarkers"></map>
		</view>
		<movable-area class="move-content" @touchmove.stop>
			<movable-view class="move-incontent" :style="'height:' + movableHeight + 'px'" :y="initY" inertia
				:damping="10" :friction="1" direction="vertical" :animation="false" @change="movableChange"
				@touchend="touchEnd">
				<view class="move-drag-ico" @click.stop="openHide">
					<image class="drag-img" :class="{'drag-transform':drageIco == 'down'}" src="../../static/down.png"
						mode=""></image>
				</view>
				<view class="move-infos-body" style="height: calc(100% - 50px);">
					<scroll-view style="height: 100%;" :scroll-y="initY == canDragTop">
						<view class="" v-for="i in 100">{{ i }}</view>
					</scroll-view>

				</view>

				<!-- <video src="https://grid.wanhi.com.cn:65417/file/1650703977267/grid/eventhelp/20220623/1539819981196234754.mp4"></video> -->
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navTabtop: 20,

				mapObj: {
					longitude: 121.373219,
					latitude: 31.23378,
					scale: 16
				},
				mapMarkers: [{
					id: 123132,
					longitude: 121.373219,
					latitude: 31.23378,
					iconPath: '/static/loca.png',
					width: 40,
					height: 40
				}],
				// page
				windowHeight: 800,
				mapHeight: 250,
				cHeightNum: 0,
				movableHeight: 800,
				canDragTop: 0,
				initY: 0,
				dragY: 0,
				drageIco: 'up'

			};
		},
		onLoad() {
			let menuButton = uni.getMenuButtonBoundingClientRect();
			this.navTabtop = menuButton.top;
			console.log('==============', menuButton);
			this.windowHeight = uni.getSystemInfoSync().windowHeight

			this.mapHeight = this.windowHeight - 240;
			this.movableHeight = this.windowHeight - 250
			this.cHeightNum = this.windowHeight - 240;
			this.initY = -(this.windowHeight - 250 - 240);
			this.canDragTop = -(this.windowHeight - 250 - 240)

			this.dragY = 0
		},
		methods: {
			goBackPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			// S 移动拖拽
			movableChange(e) {
				let y = e.detail.y;
				this.dragY = y
				let c_h = this.cHeightNum + y;
				if (c_h >= 250) {
					this.mapHeight = c_h;
				}
				if (y > (-100)) {
					this.drageIco = 'down'
				} else {
					this.drageIco = 'up'
				}
			},
			touchEnd(e) {
				this.initY = this.dragY
				setTimeout(() => {
					if (this.dragY > (-100)) {
						this.initY = 0

					} else {
						this.initY = -(this.windowHeight - 250 - 240);
					}
				}, 100)

			},
			openHide() {
				if (this.drageIco == 'up') {
					this.initY = 0
				} else {
					this.initY = -(this.windowHeight - 250 - 240);
				}
			}
			// E 移动拖拽

		}
	};
</script>

<style lang="scss">
	.event-help-details {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.back-last-page {
		width: 60rpx;
		height: 60rpx;
		position: fixed;
		left: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999999;
	}

	.map-content {
		width: 100%;
		background-color: #eee;
		position: absolute;
		top: 0;
		left: 0;

		.map-gis {
			width: 100%;
			height: 100%;
		}
	}

	// S 滑动块
	.move-content {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 240px;
	}

	.move-incontent {
		width: 100%;
		background-color: #fff;
	}

	.move-drag-ico {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.drag-img {
			width: 50rpx;
			height: 30rpx;
			transition: all .3s;
		}

		.drag-transform {
			transform: rotate(-180deg);
		}
	}

	// 滚动内容
	.move-infos-body {}

	// E 滑动块
</style>

实现效果：