苹果实现

index.html

@@ -7,7 +7,7 @@
   <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
   <script type="text/javascript" src="https://lfjf.rzfwq.com/djt/soft/bogu2021/uni-app/webview.js"></script>
   <meta name="viewport"
-    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
+    content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
   <title>AI小财神</title>
 </head>
 

src/utils/setHeight.js

@@ -25,26 +25,26 @@
 // }
 // 给父级发送高度
 export const setHeight = (el) => {
-    const sendHeight = () => {
-        const height = el.offsetHeight;
+    // const sendHeight = () => {
+    //     const height = el.offsetHeight;
 
-        // 打印高度到控制台
-        console.log('Current height:', height);
-        window.parent.postMessage(
-            {
-                data: {
-                    type: 'duobaoqibingHeight',
-                    data: el.offsetHeight
-                }
-            },
-            '*'
-        );
+    //     // 打印高度到控制台
+    //     console.log('Current height:', height);
+    //     window.parent.postMessage(
+    //         {
+    //             data: {
+    //                 type: 'duobaoqibingHeight',
+    //                 data: el.offsetHeight
+    //             }
+    //         },
+    //         '*'
+    //     );
 
-        // 滚动到顶部
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-    };
+    //     // 滚动到顶部
+    //     window.scrollTo({ top: 0, behavior: 'smooth' });
+    // };
     console.log(el.offsetHeight);
 
     // 初始发送高度
-    setTimeout(sendHeight, 800);
+    // setTimeout(sendHeight, 800);
 };

src/views/homePage.vue

@@ -421,7 +421,7 @@ const adjustFooterPosition = (height) => {
   // footer.style.bottom = `${keyboardHeight}px`; 
   // 给 Main 区域留出 Footer + 键盘的空间
   homePage.style.height = `${height}px`;
-  app.style.height = `${height}px`;
+  // app.style.height = `${height}px`;
 
   void homePage.offsetHeight;
 
@@ -429,6 +429,15 @@ const adjustFooterPosition = (height) => {
   const body = document.querySelector('body');
 
   html.style.height = `${height}px`;
+  body.style.height = `${height}px`;
+
+  html.scrollTop = 0;
+
+  setTimeout(() => {
+    // 隐藏滚动条
+    html.style.overflow = 'hidden';
+    body.style.overflow = 'hidden';
+  }, 200)
 
   console.log(html.offsetHeight, 'html')
   console.log(html.clientHeight, 'html')
@@ -440,6 +449,9 @@ const adjustFooterPosition = (height) => {
   console.log(homePage.scrollHeight, 'homePageScrollHeight')
   console.log(window.innerHeight, 'window.innerHeight')
   console.log(window.visualViewport.height, 'window.visualViewport.height')
+  console.log(main.offsetHeight, 'main')
+  console.log(main.clientHeight, 'mainClientHeight')
+  console.log(main.scrollHeight, 'mainScrollHeight')
 
 };
 
@@ -481,6 +493,18 @@ window.addEventListener('resize', () => {
     homePage.style.height = `${window.innerHeight}px`;
   }
 });
+
+// 禁用全局触摸滚动
+document.addEventListener('touchmove', (e) => {
+  // 判断触摸目标是否在可滚动区域内
+  const isScrollableArea = e.target.closest('.tab-content');
+
+  // 如果不在可滚动区域，则阻止滚动
+  if (!isScrollableArea) {
+    e.preventDefault();
+  }
+}, { passive: false });
+
 onMounted(async () => {
   const isPhone =
     /phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone/i.test(
@@ -647,16 +671,30 @@ onMounted(async () => {
 
 <style scoped>
 html {
-  overflow: hidden;
-  position: fixed
+  height: 100dvh;
+  overflow: hidden !important;
+  position: fixed;
+  margin: 0;
+  padding: 0;
+  -webkit-overflow-scrolling: auto;
+  /* 禁用 iOS 弹性滚动 */
 }
 
 body {
-  overflow: hidden;
+  height: 100dvh;
+  overflow: clip;
+  margin: 0;
+  padding: 0;
+  -webkit-overflow-scrolling: auto;
+  /* 禁用 iOS 弹性滚动 */
+  position: fixed;
 }
 
 #app {
   overflow: hidden;
+  height: 100%;
+  margin: 0;
+  padding: 0;
 }
 
 .homepage {