From 3b03f87a02458f719e2eb4bf112a13441b427d14 Mon Sep 17 00:00:00 2001
From: ‘chensiAb’ <‘chenchenco03@163.com’>
Date: Tue, 25 Mar 2025 13:54:34 +0800
Subject: [PATCH] Merge branch 'master' of ssh://dev.zhiheiot.com:29418/mob-components
---
_cursor.ai/layout.doc/h5Page.doc/CH5Page.doc.md | 175 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 175 insertions(+), 0 deletions(-)
diff --git a/_cursor.ai/layout.doc/h5Page.doc/CH5Page.doc.md b/_cursor.ai/layout.doc/h5Page.doc/CH5Page.doc.md
new file mode 100644
index 0000000..00e2eb4
--- /dev/null
+++ b/_cursor.ai/layout.doc/h5Page.doc/CH5Page.doc.md
@@ -0,0 +1,175 @@
+# 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
+<template>
+ <CPage>
+ <CNavBar title="页面标题" />
+ <CContent>
+ <view class="page-content">
+ <!-- 页面内容 -->
+ <view class="content-item">内容项1</view>
+ <view class="content-item">内容项2</view>
+ <view class="content-item">内容项3</view>
+ </view>
+ </CContent>
+ </CPage>
+</template>
+
+<script>
+import { CPage, CNavBar, CContent } from '@components/layout/h5Page';
+
+export default {
+ components: {
+ CPage,
+ CNavBar,
+ CContent
+ }
+}
+</script>
+```
+
+### 带滚动的内容和自定义返回事件
+
+```html
+<template>
+ <CPage>
+ <CNavBar
+ title="详情页面"
+ :onClickIcon="handleBackClick"
+ />
+ <CContent
+ scroll="on"
+ ref="content"
+ >
+ <view class="page-content">
+ <!-- 长内容需要滚动 -->
+ <view class="content-section" v-for="i in 20" :key="i">
+ 内容区域 {{i}}
+ </view>
+ </view>
+ <view class="scroll-top-btn" @tap="evt => scrollToTop()">回到顶部</view>
+ </CContent>
+ </CPage>
+</template>
+
+<script>
+import { CPage, CNavBar, CContent } from '@components/layout/h5Page';
+
+export default {
+ components: {
+ CPage,
+ CNavBar,
+ CContent
+ },
+ methods: {
+ handleBackClick() {
+ // 在返回前执行一些操作
+ console.log('用户点击了返回按钮');
+ // 返回true继续执行默认的返回行为
+ return true;
+ },
+ scrollToTop() {
+ this.$refs.content.$scrollTop(0);
+ }
+ }
+}
+</script>
+```
+
+### 带下拉菜单的导航栏
+
+```html
+<template>
+ <CPage>
+ <CNavBar
+ title="订单列表"
+ :dropNav="navMenuItems"
+ />
+ <CContent>
+ <!-- 页面内容 -->
+ </CContent>
+ </CPage>
+</template>
+
+<script>
+import { CPage, CNavBar, CContent } from '@components/layout/h5Page';
+
+export default {
+ components: {
+ CPage,
+ CNavBar,
+ CContent
+ },
+ data() {
+ return {
+ navMenuItems: [
+ { title: '新增订单', url: '/pages/order/create' },
+ { title: '订单筛选', url: '/pages/order/filter' },
+ { title: '导出订单', url: '/pages/order/export' }
+ ]
+ }
+ }
+}
+</script>
+```
+
+## 注意事项
+
+1. H5页面组件需要按照 `CPage > CNavBar + CContent` 的层级结构使用
+2. 当使用下拉菜单时，点击页面其他区域会自动关闭菜单
+3. CNavBar 的下拉菜单项需要设置 url 才能正常跳转
+4. CContent 设置 scroll="on" 后会自动处理内容区域的滚动，无需额外设置样式
+5. 当点击CNavBar的返回图标时，如果没有设置 onClickIcon 回调，将默认执行 Taro.navigateBack()
+6. 组件会监听页面点击和触摸事件来处理下拉菜单的关闭逻辑
+
+<!-- 作者：Tevin -->
\ No newline at end of file
--
Gitblit v1.9.1