---
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` 全页滚动** 等已另有约定的结构。