# 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 ``` ### 带滚动的内容和自定义返回事件 ```html ``` ### 带下拉菜单的导航栏 ```html ``` ## 注意事项 1. H5页面组件需要按照 `CPage > CNavBar + CContent` 的层级结构使用 2. 当使用下拉菜单时,点击页面其他区域会自动关闭菜单 3. CNavBar 的下拉菜单项需要设置 url 才能正常跳转 4. CContent 设置 scroll="on" 后会自动处理内容区域的滚动,无需额外设置样式 5. 当点击CNavBar的返回图标时,如果没有设置 onClickIcon 回调,将默认执行 Taro.navigateBack() 6. 组件会监听页面点击和触摸事件来处理下拉菜单的关闭逻辑