diff --git a/pages/template/half-screen/half-screen.uvue b/pages/template/half-screen/half-screen.uvue
index 5d8a653ed2cb953245a40100078684f6d186d9b4..35721e87ca92d9bed74642d4c1f609cffb7ad8fa 100644
--- a/pages/template/half-screen/half-screen.uvue
+++ b/pages/template/half-screen/half-screen.uvue
@@ -3,10 +3,10 @@
     <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"
+    <view ref="halfScreen" class="halfScreen" @touchstart="onHalfTouchStart" @touchmove="onHalfTouchMove"
       @touchend="onHalfTouchEnd">
       <view class="halfTitle">半屏弹窗标题</view>
-      <scroll-view id="halfScroll" class="halfScroll" rebound="true">
+      <scroll-view ref="halfScroll" class="halfScroll" rebound="true" :direction="scrollDirection">
         <view v-for="(item,index) in list" :key="index" class="item">
           half screen content-{{item}}
         </view>
@@ -28,8 +28,9 @@
         lastY: 0,			//上次
         lastY2: 0,			//
         bAnimation: false,	//是否动画
-        halfNode: null as Element | null,
-        scrollNode: null as Element | null
+        halfNode: null as UniElement | null,
+        scrollNode: null as UniElement | null,
+        scrollDirection: 'vertical'
       }
     },
     methods: {
@@ -50,8 +51,14 @@
           }
           let offset = p.screenY - this.halfScreenY;
           if (offset > 0) {//向下滚动
-            this.halfMove = true;
-            this.scrollNode?.setAttribute('scroll-y', 'false');
+            this.halfMove = true;
+            // #ifdef APP
+            //this.scrollNode?.setAttribute('scroll-y', 'false');
+            this.scrollNode?.setAttribute('direction', 'none');
+            // #endif
+            // #ifdef WEB
+            this.scrollDirection = 'none';
+            // #endif
             this.halfNode?.style?.setProperty('transform', 'translateY(' + offset.toFixed(2) + 'px)');
             this.halfOffset = offset;
           } else if (this.halfOffset > 0) {//向上滚动
@@ -59,8 +66,14 @@
             if (offset > this.halfOffset) {
               offset = 0;
               this.halfMove = false;
-              this.scrollNode?.setAttribute('scroll-y', 'true');
-            }
+            }
+            // #ifdef APP
+            //this.scrollNode?.setAttribute('scroll-y', 'true');
+            this.scrollNode?.setAttribute('direction', 'vertical');
+            // #endif
+            // #ifdef WEB
+            this.scrollDirection = 'vertical';
+            // #endif
             this.halfNode?.style?.setProperty('transform', 'translateY(' + offset.toFixed(2) + 'px)');
             this.halfOffset = offset;
           }
@@ -86,11 +99,17 @@
       },
       switchHalfScreen(show : boolean) {
         if (show && ('visible' == this.halfNode?.style?.getPropertyValue('visibility'))) {//容错处理
-          console.log('qucik click button!!!');
+          console.log('quick click button!!!');
           return;
         }
         this.halfMove = false;
-        this.scrollNode?.setAttribute('scroll-y', 'true');
+        // #ifdef APP
+        //this.scrollNode?.setAttribute('scroll-y', 'true');
+        this.scrollNode?.setAttribute('direction', 'vertical');
+        // #endif
+        // #ifdef WEB
+        this.scrollDirection = 'vertical';
+        // #endif
         this.halfScreenY = 0;
         this.halfOffset = 0;
         let top = this.totalHeight;
@@ -103,9 +122,9 @@
           this.halfNode?.style?.setProperty('transition-timing-function', 'linear');
           time *= (this.halfHeight / this.totalHeight);		//计算关闭动画时间
         }
-        this.halfNode?.style?.setProperty('transition-duration', time.toFixed(0)+"ms");
+        this.halfNode?.style?.setProperty('transition-duration', time.toFixed(0)+'ms');
         this.halfNode?.style?.setProperty('transition-property', 'top');
-        this.halfNode?.style?.setProperty('top', top.toFixed(2));
+        this.halfNode?.style?.setProperty('top', top.toFixed(2)+'px');
         setTimeout(() => {
           if (!show) {
             this.halfNode?.style?.setProperty('visibility', 'hidden');
@@ -119,12 +138,18 @@
       },
       resumeHalfScreen() {
         let time = 300;//(500*this.halfOffset/this.halfHeight).toFixed(0); //回弹动画时间
-        this.halfNode?.style?.setProperty('transition-duration', time.toFixed(0)+"ms");
+        this.halfNode?.style?.setProperty('transition-duration', time.toFixed(0)+'ms');
         this.halfNode?.style?.setProperty('transition-timing-function', 'ease-in-out');
         this.halfNode?.style?.setProperty('transition-property', 'transform');
         this.halfNode?.style?.setProperty('transform', 'translateY(0px)');
-        this.halfMove = false;
-        this.scrollNode?.setAttribute('scroll-y', 'true');
+        this.halfMove = false;
+        // #ifdef APP
+        //this.scrollNode?.setAttribute('scroll-y', 'true');
+        this.scrollNode?.setAttribute('direction', 'vertical');
+        // #endif
+        // #ifdef WEB
+        this.scrollDirection = 'vertical';
+        // #endif
         this.halfScreenY = 0;
         this.halfOffset = 0;
         setTimeout(() => {
@@ -135,17 +160,17 @@
       }
     },
     onReady() {
-      this.halfNode = uni.getElementById('halfScreen');
-      this.scrollNode = uni.getElementById('halfScroll');
+      this.halfNode = this.$refs['halfScreen'] as UniElement;//uni.getElementById('halfScreen');
+      this.scrollNode = this.$refs['halfScroll'] as UniElement;//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));
+      this.halfNode?.style?.setProperty('top', this.totalHeight.toFixed(2)+'px');
     },
     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('top', this.totalHeight.toFixed(2)+'px');
       this.halfNode?.style?.setProperty('visibility', 'hidden');
     }
   }
@@ -184,7 +209,8 @@
   }
 
   .halfScroll {
-    background-color: white;
+    background-color: white;
+    flex: 1;
   }
 
   .item {