更新记录

1.0.0（2025-08-08） 下载此版本

2025.8.8 v1.0.0 新增custom-headnav组件

平台兼容性

uni-app(4.07)

uni-app x(4.07)

custom-headnav 组件说明

项目简介

• 基于uni-app封装的自定义头部导航栏组件
• 主要功能包括：自定义头部导航背景、自定义导航左侧图标及样式、自定义导航栏标题内容及样式和自定义导航栏排版布局
• 兼容微信和支付宝小程序
• 适配市场所有主流机型

注意点

• 使用此组件的模块需定义hcSystemInfomations全局变量，用于获取当前系统信息。 示例：

  //全局变量
  data() {
          return {
              hcSystemInfomations: null, //系统信息
          }
      },
  //custom-headnav组件内的created已获取（const curSystemInfomations = getSystemInfo()）并存入本地缓存
      mounted() {
          this.hcSystemInfomations = JSON.parse(uni.getStorageSync('hcSystemInfomations')) ? JSON.parse(uni.getStorageSync('hcSystemInfomations')) : {} //系统信息
      },

• 为避免与内容区域排版冲突，使用此组件的模块在中需定义高度，此高度应与系统信息中的navHeight+statusBarHeight加额外的计算高度一致。 示例：

  <custom-headnav style="width: 100%;" :style="{height: headNavHeight}"></custom-headnav>

  computed: {
          //头部导航栏高度
          headNavHeight() {
              return this.hcSystemInfomations ?
                  `${this.hcSystemInfomations.navHeight + this.hcSystemInfomations.statusBarHeight + 10}rpx` : '176rpx'
          },
      },

使用方式

1. 修改pages.json文件（目标模块的style配置，增加navigationStyle和usingComponents） 示例：

   "path": "pages/index/index",
   "style": {
     "navigationBarTitleText": "",
     "navigationStyle": "custom",
     "enablePullDownRefresh": false,
     "disableScroll": true,
     "mp-alipay": { //在支付宝小程序中如果不生效 就加上这两行代码 就会生效啦
       "transparentTitle": "always",
       "titlePenetrate": "YES"
     },
     "usingComponents": {
       "custom-headnav": "/components/custom-headnav"
     }
   }

2. 模板模块引入并使用 示例：

   <custom-headnav style="width: 100%;" :style="{height: headNavHeight}"></custom-headnav>

   import customHeadnav from '@/components/custom-headnav.vue';
   export default {
     data() {
       return {
         hcSystemInfomations: null, //系统信息
       }
     },
     mounted() {
       this.hcSystemInfomations = JSON.parse(uni.getStorageSync('hcSystemInfomations')) ? JSON.parse(uni.getStorageSync('hcSystemInfomations')) : {} //系统信息
     },
     components: {
       customHeadnav
     },
     computed: {
       //头部导航栏高度
       headNavHeight() {
         return this.hcSystemInfomations ? `${this.hcSystemInfomations.navHeight + this.hcSystemInfomations.statusBarHeight + 10}rpx` : '176rpx'
       },
     },
     }

参数说明

Attributes

方法