更新记录
1.0.9(2025-07-02) 下载此版本
重命名组建名称
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | - | √ | √ | √ | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - | - | - |
使用方式
需要配置下默认首页的路径 defaultHomeUrl 根据自己项目的路径来
-
直接使用默认是跟页面布局在同一层没有定位
<p-header title="标题标题"></p-header>
-
标题放到了返回箭头的旁边
<p-header leftTitle="标题"></p-header>
-
不显示返回箭头(当前页为tabbar的时候)
<p-header leftTitle="标题" :backShow="false"></p-header>
-
显示底部边框
<p-header :bdShow="true"></p-header>
-
0默认文字图标 黑色 1文字图标白色
<p-header leftTitle="标题" themeType="1" :bdShow="false"></p-header>
-
自定义样式 aaaa这个类需要在当前页且style为scoped的时候才会生效 css里面是 样式穿透的写法
<p-header leftTitle="标题" customClass="customMyclass" themeType="1" :bdShow="false"></p-header>
css: /deep/.customMyclass {
}
7. isBlank true 代表只是占位,状态栏的高度那部分
8. listenBack 拦截箭头的返回,自定义
9. bgOpacity 1背景不透明 0背景透明
10. dynamicBg true 监听页面滑动,头部的背景从透明变成白色 需要在当前页面监听生命周期 onPageScroll
<!-- 监听页面的生命周期 跟 created mounted 同级-->
onPageScroll(e) { uni.$emit('scroll', e.scrollTop) }
<!-- 在页面头部使用 -->11. fixed 固定在头部 不会跟随页面去滚动
12. 插槽 可自定义内容