103 lines
4.9 KiB
Markdown
103 lines
4.9 KiB
Markdown
# G01 固定信息区与独立列表滚动设计
|
||
|
||
## 决定
|
||
|
||
G01“已有家谱”的正常列表态改为两段式布局：上方信息区固定，下方列表区独立纵向滚动。该决定只作用于 G01，不改变其他 G 页面，也不改变 G01 的业务数据、入口、卡片样式、背景或弹窗。
|
||
|
||
用户已通过可操作对比稿确认该方向。
|
||
|
||
## 固定范围
|
||
|
||
由上到下固定显示：
|
||
|
||
1. 红色“我的家谱”标题栏；
|
||
2. 当前家谱大卡片；
|
||
3. 世系图、成员、字辈诗、申请审核四个快捷入口；
|
||
4. 快捷入口下方金色分隔线；
|
||
5. 底部三项导航栏。
|
||
|
||
固定区不随列表滚动，不做折叠、缩放、吸顶动画或滚动渐变。
|
||
|
||
## 独立滚动范围
|
||
|
||
金色分隔线下方到固定底部导航上方为唯一列表滚动区，包含：
|
||
|
||
- “我创建的”标题及卡片；
|
||
- “我加入的”标题及卡片；
|
||
- “加入申请”标题及卡片；
|
||
- “添加家谱”入口；
|
||
- 列表底部安全留白。
|
||
|
||
三个分组标题随列表一起滚动，不二次吸顶。现有“加入申请”连续卡片继续保持 `12rpx` 间距。
|
||
|
||
## 页面状态规则
|
||
|
||
仅 `hasGenealogies` 正常列表态使用两段式布局。
|
||
|
||
- `loading`：保持当前页面级加载布局，不创建空的固定区或内部列表滚动区；
|
||
- `error`：保持完整错误面板自然纵向布局；
|
||
- `empty`：保持完整空状态面板自然纵向布局；
|
||
- 添加家谱弹层、当前家谱切换层：继续使用全屏固定遮罩，滚动区不得穿透；
|
||
- 背景：继续由 `GenealogyPageBackground.vue` 固定覆盖整页，不进入任何滚动容器。
|
||
|
||
## 尺寸与布局
|
||
|
||
正常列表态使用视口高度和弹性布局分配空间，不按某一台手机写死滚动区像素高度：
|
||
|
||
- 页面壳占满当前可用视口；
|
||
- 标题栏按现有真实状态栏高度占位；
|
||
- 底部导航按现有 `112rpx + safe-area-inset-bottom` 占位；
|
||
- 当前家谱、快捷入口和分隔线按现有视觉尺寸占位；
|
||
- 剩余空间全部分配给列表滚动区，滚动容器必须得到可计算高度；
|
||
- 320×568 不压缩字号、卡片或快捷入口，列表保留约一张半卡片的可视高度并允许自然滚动；
|
||
- 360×640、360×800、412×915 以及 412×1000 均不得出现横向溢出、底栏遮挡或列表无法滚动。
|
||
|
||
## 滚动反馈与位置规则
|
||
|
||
- 不把“绝对没有滚动条”写成合同；Android 滑动时允许出现短暂的系统滚动指示条；
|
||
- 不专门美化或强制隐藏系统滚动指示条，只验证其不挤压卡片、不造成横向错位；
|
||
- 不新增下拉刷新、回弹动画、滚动阴影或底部分页行为；
|
||
- 从 G01 打开详情／申请页后返回，保留离开前的列表滚动位置；
|
||
- 打开并关闭添加家谱弹层或当前家谱切换层，不改变列表滚动位置；
|
||
- 用户切换当前家谱后，列表明确回到顶部，避免继续停留在旧家谱的浏览位置；
|
||
- loading、error、empty 与正常态切换时，不错误复用正常列表态的旧滚动位置。
|
||
|
||
## 实现边界
|
||
|
||
- 正常列表态使用单一纵向区域滚动容器；禁止嵌套同方向滚动容器；
|
||
- 当前家谱卡、快捷入口和分隔线必须位于区域滚动容器之外；
|
||
- 只调整 G01 模板结构、G01 局部样式和直接对应的测试；
|
||
- 不修改 `PageHeader.vue`、`AppTabbar.vue`、`GenealogyPageBackground.vue` 或其他 G 页面；
|
||
- 不对接接口，不新增全局状态，不改变路由；
|
||
- 不使用原生 `uni.showToast`、`uni.showModal`、`uni.showLoading` 或 `uni.showActionSheet`。
|
||
|
||
## 验证合同
|
||
|
||
### 静态合同
|
||
|
||
- 正常列表态存在且只存在一个纵向滚动容器；
|
||
- 当前家谱、快捷入口和分隔线位于滚动容器外；
|
||
- 三组列表和“添加家谱”入口位于滚动容器内；
|
||
- loading、error、empty 不被包进正常态固定结构；
|
||
- 未修改其他 G 页面共享组件引用。
|
||
|
||
### H5 运行验证
|
||
|
||
在 320×568、360×640、360×800、412×915 和 412×1000 下：
|
||
|
||
1. 滚动列表前后，标题栏、当前家谱卡、快捷入口、分隔线和底部导航的视口位置保持不变；
|
||
2. “我创建的”及其后内容发生纵向位移；
|
||
3. 可以滚动到最后一个申请卡和“添加家谱”入口；
|
||
4. 页面没有横向溢出、滚动穿透或底栏遮挡；
|
||
5. 卡片点击、添加家谱弹层、当前家谱切换层、快捷入口保持可操作；
|
||
6. 返回 G01 保留列表位置，切换当前家谱后列表回到顶部；
|
||
7. 浏览器无异常、资源 404 或 `console.error`。
|
||
|
||
### 仍缺验证
|
||
|
||
H5 证据不能替代 Android/HBuilderX 真机或模拟器。最终仍需复核 Android 区域滚动手感、短暂系统滚动指示条、惯性、返回现场、状态栏、安全区和 4GB 设备性能。
|
||
|
||
## 验收状态边界
|
||
|
||
本次实现完成后仍只是 G01 新滚动结构的内部 H5 候选。背景方向已由用户确认，但 G01 整页未获得正式验收，不得因此改为 `[x]` 或冻结。
|