- 首页
- 布局
- 页面布局
页面布局
页面基本架构：容器（page）→ 页头（page-head）→ 页面主体（page-body）→ 页脚（page-foot），配合 page 系列变体实现固定头部、全屏滚动、内容居中三种形态。
page 类与三形态
| class | 效果 |
|---|---|
page 基类 | 高度 100%，display:flex，纵向排列 |
page page-fixed | 固定头部：全屏不滚动，中部 scroll |
page page-fill | 全屏滚动（单行，无需 scroll 容器） |
page page-content | 内容轴滚动：只给 min-height 100%，中部自然撑开 |
基础页面
<div class="page page-content">
<div class="container">
<div class="page-head fill-index">
<span class="label label-white label-larger">标题</span>
</div>
<div class="page-body pd-10">
<div class="row">...</div>
</div>
<div class="page-foot pdrem-4">
<span class="label label-text">页脚文案</span>
</div>
</div>
</div>
page-fixed：固定头部
<div class="page page-fixed">
<div class="page-head fill-index" style="height:80px">
<div class="h-100 container">
<div class="row-flex">
<div class="col-other">
<span class="label label-white label-larger">标题</span>
</div>
<div class="col-auto">
<span class="label label-white"><i class="kq-kq-safe-ico"></i> 按钮</span>
</div>
</div>
</div>
</div>
<div class="page-body scroll">
<div class="container">
<div class="row">...</div>
</div>
</div>
</div>
page-fill：全屏滚动
<div class="page page-fill">
<div class="page-head fill-index">...</div>
<div class="page-body">
<div class="container">...</div>
</div>
<div class="page-foot">...</div>
</div>
page-content：内容居中
<div class="page page-content">
<div class="container" width="300" ref="要复制">
<div class="page-body pd-10">...</div>
</div>
</div>
page-head 固定模式与弹性标题
- page-head 固定模式：
page-head-head类滚动时透明背景、page-head-top类不用手机端的底部固定 + 头透明；head 用 background 渐变。 - 页面周期函数：
pageInit在页面初始化时执行、pageShown每次页面显示时执行，作用于body上。
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI ·
返回首页