From b52a448d2fc822592f7eff4f0dc522ddb35fb595 Mon Sep 17 00:00:00 2001
From: yanyilin <yanyilin@dcloud.io>
Date: Thu, 30 Nov 2023 15:06:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=85=B3=E9=97=AD=E5=8D=8A?=
 =?UTF-8?q?=E5=B1=8F=E5=BC=B9=E7=AA=97=E5=8F=AF=E8=83=BD=E5=87=BA=E7=8E=B0?=
 =?UTF-8?q?=E6=8A=96=E4=B8=80=E4=B8=8B=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/template/half-screen/half-screen.uvue | 386 ++++++++++----------
 1 file changed, 192 insertions(+), 194 deletions(-)

diff --git a/pages/template/half-screen/half-screen.uvue b/pages/template/half-screen/half-screen.uvue
index 13dd1c0a..89a2aeeb 100644
--- a/pages/template/half-screen/half-screen.uvue
+++ b/pages/template/half-screen/half-screen.uvue
@@ -1,195 +1,193 @@
-<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;
-}
+<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" 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);
+      },
+      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.toFixed(2) + 'px)');
+            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.toFixed(2) + 'px)');
+            this.halfOffset = offset;
+          }
+        }
+      },
+      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();
+        }
+      },
+      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;
+          this.halfNode?.style?.setProperty('transitionProperty', '');
+        }, 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.getWindowInfo().windowHeight;
+      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>
-- 
GitLab