73 lines
2.2 KiB
Plaintext
73 lines
2.2 KiB
Plaintext
|
---
|
|||
|
|
description: Uni-app / iOS：横幅+下拉+scroll-view 聚合首页的 flex 高度与滚动（避免 WKWebView 大片空白）
|
|||
|
|
globs:
|
|||
|
|
- zhxy-jsd/src/pages/**/*.vue
|
|||
|
|
- zhxy-jsd/src/components/**/*.vue
|
|||
|
|
- src/pages/**/*.vue
|
|||
|
|
- src/components/**/*.vue
|
|||
|
|
alwaysApply: false
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# iOS（苹果手机）兼容：Flex 嵌套 scroll-view
|
|||
|
|
|
|||
|
|
在 **Safari / 微信 WKWebView** 等环境下，页面根节点用 **`display: flex; flex-direction: column`**，中间是横幅/筛选条，底部是 **`scroll-view scroll-y`** 时，若外层未约束高度或子项使用不当，**滚动区可能被算成高度 0**，表现为主内容区一片空白（接口正常、头部仍可见）。
|
|||
|
|
|
|||
|
|
## 必须（根容器）
|
|||
|
|
|
|||
|
|
- **`min-height: 100vh`** 与 **`height: 100vh`** 同时写，给整列 flex **确定总高度**。
|
|||
|
|
- **`overflow: hidden`**：避免页面外层与内部 `scroll-view` **双重滚动**打乱布局。
|
|||
|
|
- **`box-sizing: border-box`**。
|
|||
|
|
|
|||
|
|
## 必须（可滚动的 scroll-view 区域）
|
|||
|
|
|
|||
|
|
对作为 flex 剩余空间占位的节点（类名常见 **`scroll-main`** 等）：
|
|||
|
|
|
|||
|
|
- **`flex: 1`**
|
|||
|
|
- **`min-height: 0`**（不要用依赖 `height: 0` 的旧写法撑开；**`min-height: 0` 才是 flex 子项里嵌套滚动区的标准写法**。）
|
|||
|
|
- **`width: 100%`**，按需保留 **`padding-bottom: env(safe-area-inset-bottom)`**。
|
|||
|
|
|
|||
|
|
中间固定区（横幅、**`stats-bar`**）使用 **`flex-shrink: 0`**。
|
|||
|
|
|
|||
|
|
## 反面示例
|
|||
|
|
|
|||
|
|
```scss
|
|||
|
|
/* ❌ iOS 上易导致 scroll 区域高度异常 */
|
|||
|
|
.hub-page {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
.scroll-main {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 0;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 正面示例
|
|||
|
|
|
|||
|
|
```scss
|
|||
|
|
/* ✅ 与项目内课后服务/任务/MenuGridHub 等聚合页一致 */
|
|||
|
|
.hub-page {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
overflow: hidden;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
.scroll-main {
|
|||
|
|
flex: 1;
|
|||
|
|
min-height: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 参考实现
|
|||
|
|
|
|||
|
|
- **`src/components/MenuGridHubPage/MenuGridHubPage.vue`**
|
|||
|
|
- **`src/pages/view/routine/xkxqk/xksy/index.vue`**
|
|||
|
|
|
|||
|
|
新增同类「顶部固定 + 下部列表/网格」页面时，默认按本节实现，除非使用 **`BasicLayout` 全页滚动** 等已另有约定的结构。
|