添加半屏弹窗示例

pages.json

@@ -707,6 +707,15 @@
 	    "enablePullDownRefresh": false
 	  }
 	}
+      ,{
+            "path" : "pages/template/half-screen/half-screen",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "半屏弹窗",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
   "globalStyle": {
     "pageOrientation": "portrait",

pages/tabBar/template.uvue

@@ -109,6 +109,13 @@
 						open: false,
 						pages: [] as Page[]
 					},
+					{
+						id: "half-screen",
+						url: "half-screen",
+						name: "半屏弹窗",
+						open: false,
+						pages: [] as Page[]
+					},
 					{
 						id: "drop-card",
 						url: "drop-card",

pages/template/half-screen/half-screen.uvue

+<template>
+	<view class="page">
+		<text>TouchEvent还有细节需要优化，需支持拦截事件分发逻辑解决拖拽半屏窗口引起内容滚动的问题</text>
+		<button class="bottomButton" @click="switchHalfScreen(true)">打开弹窗</button>
+		<view ref="halfScreen" class="halfScreen" @touchstart="onHalfTouchStart" @touchmove="onHalfTouchMove" @touchend="onHalfTouchEnd">
+			<view class="halfTitle" >半屏弹窗标题</view>
+			<scroll-view ref="halfScroll" class="halfScroll" @scroll="onScroll" bounce="true">
+				<view v-for="(item,index) in list" :key="index" class="item">
+					half screen content-{{item}}
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import ScrollEvent from 'io.dcloud.uniapp.runtime.ScrollEvent';
+	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 INode | null,
+				scrollNode: null as INode | 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?.getAttribute('scrollTop') as number
+				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.halfNode?.style?.setProperty('transform','translateY('+offset+'px)');
+						this.halfOffset = offset;
+					}else if(this.lastY2>this.lastY && this.halfOffset>0){//容错触发向下滚动的误差
+						offset = this.halfScreenY-p.screenY;
+						if(offset>this.halfOffset){
+							offset = this.halfOffset;
+						}
+						this.halfNode?.style?.setProperty('transform','translateY('+offset+'px)');
+						this.halfOffset = offset;
+					}
+				}
+				//console.log('TouchMove', e.target);
+			},
+			onHalfTouchEnd(_:TouchEvent) {
+				if(this.bAnimation){//容错处理
+					return;
+				}
+				let top:number = this.scrollNode?.getAttribute('scrollTop') as number
+				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){
+					switchHalfScreen(false);
+				}else{
+					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.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(0));
+				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.halfScreenY = 0;
+				this.halfOffset = 0;
+				setTimeout(()=>{
+					this.bAnimation = false;
+				}, time)
+				this.bAnimation = true;
+			}
+		},
+		onReady() {
+			this.halfNode = this.$refs['halfScreen'] as INode;
+			this.halfHeight = this.halfNode!.getBoundingClientRect().height;
+			this.scrollNode = this.$refs['halfScroll'] as INode;
+			
+			this.totalHeight = uni.getWindowInfo().windowHeight;
+			this.halfNode?.style?.setProperty('top', this.totalHeight.toString());
+		},
+		// onResize() {
+		// 	this.halfHeight = this.halfNode!.getBoundingClientRect().height;
+		//  this.totalHeight = uni.getWindowInfo().windowHeight;
+		// }
+	}
+</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: cornflowerblue;
+	border-radius: 10px 10px 0 0;
+}
+.halfScroll {
+	background-color: ghostwhite;
+}
+.item {
+	height: 100px;
+}
+</style>