CH5Page H5页面布局

功能说明

H5页面布局组件集，用于构建标准的H5页面结构，包含页面容器、导航栏和内容区域三个部分，适用于需要遵循统一布局规范的H5页面。

引用方式

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

使用示例

基础用法

<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>

带滚动的内容和自定义返回事件

<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>

带下拉菜单的导航栏

<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. 组件会监听页面点击和触摸事件来处理下拉菜单的关闭逻辑