update Chat.vue

src/views/chat/Chat.vue

@@ -80,14 +80,19 @@ export default {
 </script>
 
 <style scoped>
-/* 全局容器，模拟手机屏幕大小，也可以直接占满全屏 */
+/* 全局容器，模拟手机屏幕大小，彻底消除手机端 100vh 带来的全局滚动 */
 .app-container {
   display: flex;
   flex-direction: column;
   width: 100%;
   max-width: 450px;
-  height: 100vh;
-  margin: 0 auto;
+  /* 【改良】用 100% 替代 100vh，防止手机浏览器工具栏撑破视口 */
+  height: 100%;
+  position: fixed; /* 【强力外壳】通过 fixed 定位锁死屏幕，绝不让出视口 */
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
   overflow: hidden;
 }
 
@@ -100,6 +105,7 @@ export default {
   align-items: center;
   padding: 0 16px;
   border-bottom: 1px solid #e0e0e0;
+  flex-shrink: 0; /* 【防止挤压】确保 header 高度不被强行压缩 */
 }
 
 .app-header .title {
@@ -117,10 +123,19 @@ export default {
 /* 中间主内容区：自动撑满，超长滚动 */
 .app-content {
   flex: 1;
-  display: flex;         /* 加上这一行 */
-  flex-direction: column;/* 加上这一行 */
-  overflow: hidden;      /* 加上这一行，防止子组件溢出到大框架外面 */
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   background-color: #f7f7f7;
+  position: relative;    /* 【新增】为内部绝对定位提供基准 */
+}
+
+/* 【关键改良】：强行约束 keep-alive 和 router-view 必须继承满高，不允许自由溢出 */
+.app-content > * {
+  flex: 1;
+  height: 100%;
+  overflow-y: auto;      /* 【高仿真滚动】只让列表组件内部滚动，不让大框架滚动 */
+  -webkit-overflow-scrolling: touch; /* 优化 iOS 滚动的丝滑度 */
 }
 
 .page-mock {
@@ -147,7 +162,8 @@ export default {
   display: flex;
   justify-content: space-around;
   align-items: center;
-  padding-bottom: env(safe-area-inset-bottom); /* 适配全面屏底部黑条 */
+  flex-shrink: 0; /* 【防止挤压】确保 footer 高度固定不塌陷 */
+  padding-bottom: env(safe-area-inset-bottom);
 }
 
 /* 单个导航项 */
@@ -160,18 +176,18 @@ export default {
   cursor: pointer;
   flex: 1;
   height: 100%;
-  font-size: 10px; /* 微信风格的小字 */
+  font-size: 10px;
 }
 
 .nav-item i {
-  font-size: 22px; /* 图标稍大 */
+  font-size: 22px;
   margin-bottom: 2px;
   transition: color 0.2s;
 }
 
 /* 选中激活状态 */
 .nav-item.active {
-  color: #07c160; /* 微信经典绿 */
+  color: #07c160;
 }
 
 /* 微信未读消息红点微调 */