合并：更新半屏弹窗示例

pages/tabBar/template.uvue

@@ -154,14 +154,13 @@ export default {
           open: false,
           pages: [] as Page[],
         },
-        // {
-        //   id: 'half-screen',
-        //   url: 'half-screen',
-        //   name: '半屏弹窗',
-        //   open: false,
-        //   enable: 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>
+	<view id="page" class="page">
+		<text style="margin: 10px">半屏弹窗效果是通过监听TouchEvent实现，当半屏窗口移动时禁用scroll-view的滚动，避免两者的冲突。</text>
 		<button class="bottomButton" @click="switchHalfScreen(true)">打开弹窗</button>
-		<view ref="halfScreen" class="halfScreen" @touchstart="onHalfTouchStart" @touchmove="onHalfTouchMove" @touchend="onHalfTouchEnd">
+		<view id="halfScreen" class="halfScreen" @touchstart="onHalfTouchStart" @touchmove="onHalfTouchMove" @touchend="onHalfTouchEnd">
 			<view class="halfTitle" >半屏弹窗标题</view>
-			<scroll-view ref="halfScroll" class="halfScroll" @scroll="onScroll" bounce="true">
+			<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>
@@ -39,7 +39,7 @@
 				if(this.bAnimation){//容错处理
 					return;
 				}
-				let top:number = this.scrollNode?.getAttribute('scrollTop') as number
+				let top:number = this.scrollNode?.scrollTop??0;
 				let p = e.touches[0];
 				this.lastY2 = this.lastY;
 				this.lastY = p.screenY;
@@ -48,26 +48,36 @@
 						this.halfScreenY = p.screenY;
 					}
 					let offset = p.screenY-this.halfScreenY;
-					if(offset > 0){
+					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.lastY2>this.lastY && this.halfOffset>0){//容错触发向下滚动的误差
+					}else if(this.halfOffset>0){//向上滚动
 						offset = this.halfScreenY-p.screenY;
 						if(offset>this.halfOffset){
-							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?.getAttribute('scrollTop') as number
+				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;
@@ -76,7 +86,7 @@
 				}
 				if(bHide){
 					this.switchHalfScreen(false);
-				}else{
+				}else if(this.halfOffset>0){
 					this.resumeHalfScreen();
 				}
 			},
@@ -89,6 +99,7 @@
 					return;
 				}
 				this.halfMove = false;
+        this.scrollNode?.setAttribute('scroll-y', 'true');
 				this.halfScreenY = 0;
 				this.halfOffset = 0;
 				let top = this.totalHeight;
@@ -103,7 +114,7 @@
 				}
 				this.halfNode?.style?.setProperty('transitionDuration', time.toFixed(0));
 				this.halfNode?.style?.setProperty('transitionProperty','top');
-				this.halfNode?.style?.setProperty('top', top.toFixed(0));
+				this.halfNode?.style?.setProperty('top', top.toFixed(2));
 				setTimeout(()=>{
 					if(!show){
 						this.halfNode?.style?.setProperty('visibility','hidden');
@@ -122,6 +133,7 @@
 				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(()=>{
@@ -131,17 +143,19 @@
 			}
 		},
 		onReady() {
-			this.halfNode = this.$refs['halfScreen'] as Element;
+			this.halfNode = uni.getElementById('halfScreen');
+			this.scrollNode = uni.getElementById('halfScroll');
+
 			this.halfHeight = this.halfNode!.getBoundingClientRect().height;
-			this.scrollNode = this.$refs['halfScroll'] as Element;
-			
-			this.totalHeight = uni.getWindowInfo().windowHeight;
-			this.halfNode?.style?.setProperty('top', this.totalHeight.toString());
+			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;
-		//  this.totalHeight = uni.getWindowInfo().windowHeight;
-		// }
+    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>
 
@@ -169,11 +183,11 @@
 	align-items: center;
 	justify-content: center;
 	height: 48px;
-	background-color: cornflowerblue;
+	background-color: ghostwhite;
 	border-radius: 10px 10px 0 0;
 }
 .halfScroll {
-	background-color: ghostwhite;
+	background-color: white;
 }
 .item {
 	height: 100px;