half-screen.uvue

<template>
	<view id="page" class="page">
		<text style="margin: 10px">半屏弹窗，演示了弹出层内scroll-view滚动到顶时由滚变拖。本效果是通过监听TouchEvent实现，当半屏窗口移动时禁用scroll-view的滚动，避免两者的冲突。</text>
		<button class="bottomButton" @click="switchHalfScreen(true)">打开弹窗</button>
		<view id="halfScreen" class="halfScreen" @touchstart="onHalfTouchStart" @touchmove="onHalfTouchMove" @touchend="onHalfTouchEnd">
			<view class="halfTitle" >半屏弹窗标题</view>
			<scroll-view id="halfScroll" class="halfScroll" @scroll="onScroll" rebound="true">
				<view v-for="(item,index) in list" :key="index" class="item">
					half screen content-{{item}}
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15'],
				totalHeight: 0,		//总高度
				halfMove: false,	//是否Move，响应TouchMove
				halfScreenY: 0,		//响应TouchMove的起始点Y坐标
				halfOffset: 0,		//偏移的位置，translateY
				halfHeight: 0,		//高度
				lastY: 0,			//上次
				lastY2: 0,			//
				bAnimation: false,	//是否动画
				halfNode: null as Element | null,
				scrollNode: null as Element | null
			}
		},
		methods: {
			onHalfTouchStart(_:TouchEvent) {
				this.halfNode?.style?.setProperty('transitionDuration', 0);
				//console.log('Title TouchStart: ', e);
			},
			onHalfTouchMove(e:TouchEvent) {
				if(this.bAnimation){//容错处理
					return;
				}
				let top:number = this.scrollNode?.scrollTop??0;
				let p = e.touches[0];
				this.lastY2 = this.lastY;
				this.lastY = p.screenY;
				if(top <= 0.01 || this.halfMove){
					if(this.halfScreenY == 0){
						this.halfScreenY = p.screenY;
					}
					let offset = p.screenY-this.halfScreenY;
					if(offset > 0){//向下滚动
						this.halfMove = true;
            this.scrollNode?.setAttribute('scroll-y', 'false');
						this.halfNode?.style?.setProperty('transform','translateY('+offset+'px)');
            if(offset==0){
              console.log('translateY(0px)', this.halfOffset)
            }
						this.halfOffset = offset;
					}else if(this.halfOffset>0){//向上滚动
						offset = this.halfScreenY-p.screenY;
						if(offset>this.halfOffset){
							offset = 0;
              this.halfMove = false;
              this.scrollNode?.setAttribute('scroll-y', 'true');
						}
						this.halfNode?.style?.setProperty('transform','translateY('+offset+'px)');
            if(offset==0){
              console.log('translateY(0px)', this.halfOffset)
            }
						this.halfOffset = offset;
					}
				}
				//console.log('TouchMove', e.target);
			},
			onHalfTouchEnd(_:TouchEvent) {
        this.halfScreenY = 0;
				if(this.bAnimation){//容错处理
					return;
				}
				let top:number = this.scrollNode?.scrollTop??0;
				let bHide = (this.halfHeight-this.halfOffset)<this.halfHeight/4;
				if(bHide){
					bHide = this.lastY2>0&&this.lastY2<=this.lastY;
				}else if(top <= 0.01){
					bHide = (this.lastY-this.lastY2)>3;		//向下滑动计算加速度判断是否关闭，简单处理未考虑时间
				}
				if(bHide){
					this.switchHalfScreen(false);
				}else if(this.halfOffset>0){
					this.resumeHalfScreen();
				}
			},
			onScroll(_: ScrollEvent) {
				//console.log('onScroll: ', e);
			},
			switchHalfScreen(show:boolean) {
				if(show&&('visible'==this.halfNode?.style?.getPropertyValue('visibility'))){//容错处理
					console.log('qucik click button!!!');
					return;
				}
				this.halfMove = false;
        this.scrollNode?.setAttribute('scroll-y', 'true');
				this.halfScreenY = 0;
				this.halfOffset = 0;
				let top = this.totalHeight;
				let time = 300;
				if(show){
					top = this.totalHeight*30/100;	//计算显示的位置
					this.halfNode?.style?.setProperty('visibility','visible');
					this.halfNode?.style?.setProperty('transitionTimingFunction','ease-in-out');
				}else{
					this.halfNode?.style?.setProperty('transitionTimingFunction','linear');
					time *= (this.halfHeight/this.totalHeight);		//计算关闭动画时间
				}
				this.halfNode?.style?.setProperty('transitionDuration', time.toFixed(0));
				this.halfNode?.style?.setProperty('transitionProperty','top');
				this.halfNode?.style?.setProperty('top', top.toFixed(2));
				setTimeout(()=>{
					if(!show){
						this.halfNode?.style?.setProperty('visibility','hidden');
						this.halfNode?.style?.setProperty('transitionDuration', 0);
						this.halfNode?.style?.setProperty('transform','');
					}
					this.halfNode?.style?.setProperty('transitionProperty','');
					this.bAnimation = false;
				}, time)
				this.bAnimation = true;
			},
			resumeHalfScreen() {
				let time = 300;//(500*this.halfOffset/this.halfHeight).toFixed(0); //回弹动画时间
				this.halfNode?.style?.setProperty('transitionDuration',time.toFixed(0));
				this.halfNode?.style?.setProperty('transitionTimingFunction','ease-in-out');
				this.halfNode?.style?.setProperty('transitionProperty','transform');
				this.halfNode?.style?.setProperty('transform','translateY(0px)');
				this.halfMove = false;
        this.scrollNode?.setAttribute('scroll-y', 'true');
				this.halfScreenY = 0;
				this.halfOffset = 0;
				setTimeout(()=>{
					this.bAnimation = false;
				}, time)
				this.bAnimation = true;
			}
		},
		onReady() {
			this.halfNode = uni.getElementById('halfScreen');
			this.scrollNode = uni.getElementById('halfScroll');

			this.halfHeight = this.halfNode!.getBoundingClientRect().height;
			this.totalHeight = uni.getElementById('page')?.getBoundingClientRect()?.height??0;//uni.getWindowInfo().windowHeight;
			this.halfNode?.style?.setProperty('top', this.totalHeight.toFixed(2));
		},
    onResize() {
      this.halfHeight = this.halfNode?.getBoundingClientRect()?.height??0;
      this.totalHeight = uni.getElementById('page')?.getBoundingClientRect()?.height??0;
      this.halfNode?.style?.setProperty('top', this.totalHeight.toFixed(2));
      this.halfNode?.style?.setProperty('visibility','hidden');
    }
	}
</script>

<style>
.page {
	flex: 1;
	background-color: darkgrey;
}
.bottomButton {
	position: absolute;
	width: 100%;
	bottom: 0px;
}
.halfScreen {
	position: absolute;
	top: 100%;
	width: 100%;
	height: 70%;
	transition-timing-function: ease-in-out; /*ease ease-in ease-out ease-in-out linear step-start step-end*/
	transition-property: top;
	transition-duration: 0;
	visibility: hidden;
}
.halfTitle {
	align-items: center;
	justify-content: center;
	height: 48px;
	background-color: ghostwhite;
	border-radius: 10px 10px 0 0;
}
.halfScroll {
	background-color: white;
}
.item {
	height: 100px;
}
</style>