更新记录

1.0.0（2026-06-16） 下载此版本

  • 新增 Vue3 版本 p-header-v3 组件。
  • 统一 props 命名，改为更语义化的字段。
  • 使用 CSS 绘制返回箭头，移除静态图片依赖。
  • 优化动态背景监听卸载逻辑，避免误影响其他事件。

平台兼容性

uni-app(4.15)

Vue2 Vue3 Vue3插件版本 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- √ 1.0.0 √ √ √ - √ √ -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
√ - - - - - - - - - - -

p-header-v3

Vue3 版本简易公共头部组件，适用于 uni-app 项目。

使用方式

<p-header-v3 title="标题"></p-header-v3>

Props

参数 说明 类型 默认值
fixed 是否固定在页面顶部 Boolean true
leftTitle 返回按钮右侧文字 String ''
title 居中标题 String ''
showBack 是否显示返回按钮 Boolean true
showBorder 是否显示底部分割线 Boolean false
theme 主题类型，0 黑色，1 白色 Number/String 0
customClass 自定义类名 String ''
placeholder 是否只显示状态栏占位 Boolean false
extraHeight 底部扩展间距，支持 number、px、rpx、upx Number/String 0
interceptBack 是否拦截默认返回 Boolean false
backgroundColor 背景颜色 String '#fff'
backgroundOpacity 背景透明度 Number 1
enableScrollBackground 是否开启滚动动态背景 Boolean false
defaultHomeUrl 页面栈为空时跳转的首页地址 String '/pages/index/index'

Events

事件名 说明
back 点击返回按钮时触发

动态背景

页面中监听 onPageScroll 并发送滚动距离：

onPageScroll(e) {
  uni.$emit('scroll', e.scrollTop)
}

组件中开启：

<p-header-v3 :enable-scroll-background="true"></p-header-v3>

示例

<p-header-v3 left-title="返回" title="页面标题"></p-header-v3>
<p-header-v3 :show-back="false" title="首页"></p-header-v3>
<p-header-v3 :show-border="true" title="带分割线"></p-header-v3>
<p-header-v3 theme="1" background-color="transparent" :background-opacity="0"></p-header-v3>
<p-header-v3 :intercept-back="true" @back="handleBack"></p-header-v3>

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。