H5/components/Touchbox/Touchbox.vue

<template>
	<view class="site-box" ref="fixbox" :style="{ 'z-index':zIndex , 'height':popupHeight + 'px'}">
		<view class="tap-touch-line" @touchmove="getstart" @touchend="getend" />
		<slot />
	</view>
</template>

<script>
	export default {
		name: 'Touchbox',
		data() {
			return {
				windowHeight: 0,
				touchHeight: uni.upx2px(100),
				popupHeight: 0,
				initialHeight:0,
				oldHeight: 0,
				scrollHeight: 0,
				minTop: 0,
				maxTop: 0,
			};
		},

		props: {
			zIndex: {
				type: Number,
				default: 99,
			},
			smallHeight: {
				type: Number,
				default: 0.35,
			},
			maxHeight: {
				type: Number,
				default: 0.65,
			},
		},
		created() {
			const { windowHeight } = uni.getSystemInfoSync();
			this.windowHeight = windowHeight;
			// this.windowWidth = uni.getSystemInfoSync().windowWidth;
			this.popupHeight = this.initialHeight =  this.oldHeight = windowHeight * this.smallHeight;

			this.maxTop = windowHeight * (1 - this.smallHeight);
			this.minTop = windowHeight * (1 - this.maxHeight);

			// minTop:0,
			// maxTop:0,
		},
		mounted() {
			this.$nextTick(function() {
				// this.windowWidth = uni.getSystemInfoSync().windowWidth;
				// this.windowHeight = uni.getSystemInfoSync().windowHeight;
				// var defaultHeight = this.windowHeight * (1 - this.minHeight);
				// this.firsttop = defaultHeight;
				// this.phonetop =
				// 	(this.windowHeight * this.maxHeight - this.windowHeight * this.minHeight) / 2;
				// this.phoneMinTop =
				// 	(this.windowHeight * this.minHeight - this.windowHeight * this.smallHeight) / 2;
				// this.fixboxtop = defaultHeight;
				// this.$emit('currentHeight', this.windowHeight - this.fixboxtop);
				// this.$emit('maxtHeight', this.windowHeight * this.maxHeight);
			});
		},
		onReady() {},
		computed: {},
		watch: {
			popupHeight(newH, oldH) {
				this.scrollHeight = newH - this.touchHeight; 
			},
			scrollHeight: {
				handler(newH) {
					this.$emit('currentHeight', newH);
				},
				immediate: true
			}
		},
		methods: {
			// 隐藏
			concealList() {
				// this.popupHeight = this.touchHeight
				this.popupHeight = this.initialHeight
			},
			getstart(e) {
				e.preventDefault();
				const { clientY, screenY } = e.touches[0];
				const Y = clientY || screenY;
				// console.log(Y, this.maxTop)
				// // 这里特殊处理 解决：在滑动框内如果存在滚动元素，则会出现滑动时滑动框和内部滚动同时滑的问题
				if (Y < this.minTop || Y > (this.windowHeight - this.touchHeight)) {
					return
				}
				this.popupHeight = this.windowHeight - Y;
			},
			getend() {
				if (this.popupHeight >= this.oldHeight && (this.popupHeight - this.oldHeight) > 50) {
					// 上拉
					this.popupHeight = this.windowHeight * this.maxHeight
				} else if ((this.oldHeight - this.popupHeight) > 50) {
					// console.log("this.oldHeight = ", this.oldHeight, "this.popupHeight = ", this.popupHeight)
					const s_h = this.windowHeight * this.smallHeight;
					// 下拉
					if (this.popupHeight >= s_h) {
						// 在中等偏上区域,还原成中等高度
						this.popupHeight = s_h
					} else {
						// 在中等偏下区域,还原成最小高度
						this.popupHeight = this.initialHeight
						// this.popupHeight = this.touchHeight
						
					}

				} else {
					// 拉取幅度不够，还原，防止误触发
					this.popupHeight = this.oldHeight
				};
				
				// 记录当前高度
				this.oldHeight = this.popupHeight;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.site-box {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #ffffff;
		// padding: 0 12px;
		transition-property: top;
		transition-duration: 0.7s;
		border-radius: 40rpx 40rpx 0 0;

		.tap-touch-line {
			width: 100%;
			height: 100rpx;
			position: relative;

			&:before {
				content: '';
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 30%;
				height: 8rpx;
				border-radius: 4rpx;
				background-color: rgb(214, 215, 217);
			}
		}
	}

	// .tapBoxTouchLine {
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	padding: 20rpx 0 30rpx;
	// }

	// .line {
	// 	margin: 0px;
	// 	vertical-align: middle;
	// 	// border-bottom: 8rpx solid rgb(214, 215, 217);
	// 	height: 8rpx;
	// 	background-color: rgb(214, 215, 217);
	// 	border-radius: 4rpx;

	// 	// border: 4rpx;
	// 	// border-top-color: rgb(214, 215, 217);
	// 	// border-right-color: rgb(214, 215, 217);
	// 	// border-left-color: rgb(214, 215, 217);
	// }

	// .fixedbox {
	// 	position: fixed;
	// 	left: 0;
	// 	background-color: #ffffff;
	// 	padding: 0 12px;
	// }

	// .fixedbox2 {
	// 	position: fixed;
	// 	left: 0;
	// 	background-color: #ffffff;
	// 	padding: 0 12px;
	// 	transition-property: top;
	// 	transition-duration: 0.4s;
	// }
</style>