# CH5Page H5页面布局
## 功能说明
H5页面布局组件集,用于构建标准的H5页面结构,包含页面容器、导航栏和内容区域三个部分,适用于需要遵循统一布局规范的H5页面。
## 引用方式
```js
import { CPage, CNavBar, CContent } from '@components/layout/h5Page';
```
## 组件结构
H5页面布局组件由以下三个组件组成:
1. `CPage` - 页面容器,作为整个页面的最外层容器
2. `CNavBar` - 导航栏,显示页面标题和导航按钮
3. `CContent` - 内容区域,显示页面主要内容,可选择是否支持滚动
## 组件参数
### CPage
无特定参数,通过插槽嵌套其他组件使用
### CNavBar
- `title` (String,必选):导航栏标题
- `iconType` (String,可选):左侧图标类型,默认值为 'chevron-left'
- `onClickIcon` (Function,可选):左侧图标点击事件回调函数,返回true时将执行默认的返回上一页行为
- `dropNav` (Array,可选):右侧下拉菜单配置,数组中的每项为对象,包含以下属性:
- `title` (String):菜单项标题
- `url` (String):点击菜单项跳转的页面路径
### CContent
- `scroll` (String,可选):是否开启滚动功能,默认值为 'off'
- `off`:不开启滚动
- `on`:开启滚动
## 实例方法
### CContent
- `$scrollTop(top)`:滚动到指定位置
- `top` (Number):要滚动到的位置,单位为像素,默认为0
## 使用示例
### 基础用法
```html
内容项1
内容项2
内容项3
```
### 带滚动的内容和自定义返回事件
```html
内容区域 {{i}}
scrollToTop()">回到顶部
```
### 带下拉菜单的导航栏
```html
```
## 注意事项
1. H5页面组件需要按照 `CPage > CNavBar + CContent` 的层级结构使用
2. 当使用下拉菜单时,点击页面其他区域会自动关闭菜单
3. CNavBar 的下拉菜单项需要设置 url 才能正常跳转
4. CContent 设置 scroll="on" 后会自动处理内容区域的滚动,无需额外设置样式
5. 当点击CNavBar的返回图标时,如果没有设置 onClickIcon 回调,将默认执行 Taro.navigateBack()
6. 组件会监听页面点击和触摸事件来处理下拉菜单的关闭逻辑