更新记录
1.2.7(2022-12-28)
下载此版本
h5上面也兼容苹果14(iphone15.2系统)顶部间距问题
1.2.6(2022-12-26)
下载此版本
修改插槽外面文件夹
1.2.5(2022-12-26)
下载此版本
更新了一下样式
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.2.11 app-vue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
√ |
√ |
√ |
√ |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
cjg-nav-bar自定义头部使用说明
1. 在pages.json中将需要自定义头部的页面设置为custom,
{
"pages": [
{
"path": "pages/home/index",
"style": {
"navigationStyle": "custom"
}
}
]
}
2. props属性(对外暴露属性)
属性 |
说明 |
默认值 |
备注 |
title |
导航标题 |
"" |
"" |
titStyle |
标题样式 |
--- |
默认是无样式 |
bgColor |
导航背景色 |
#fff |
默认是#fff |
3.其他属性(组件内部使用)
属性 |
说明 |
默认值 |
备注 |
pdTop |
胶囊距离顶部距离 |
0 |
使用padding-top控制标题开始显示位置 |
titH |
标题高度 |
32 |
胶囊高度一般是32px |
pdRight |
胶囊宽度+20 |
0 |
可根据自己实际设置 |
4. method方法
方法 |
说明 |
clickLeftFun |
点击左插槽区域方法 |
clickRightFun |
点击右插槽区域方法 |
5. 其他说明
小程序上默认右胶囊按钮,所以如果app或者h5上左中右结构布置按钮会被胶囊挡住,所以该组件在微信小程序上将右侧按钮放置在胶囊旁边,同时将标题也变成左对齐(居中对齐因为文字多少等原因,视觉上会有点乱),在H5和APP上还是居中显示。目前只简单测试了H5/app/微信小程序显示还可以,仅供参考,其他平台有需要自己引用之后自行查看效果。
6. 使用示例
<nav-bar title="测试标题" @clickLeftFun="navBack" @clickRightFun="navToCart">
<view slot="navRight">
<uni-icons type="cart" size="24" color="#333"><uni-icons>
</view>
</nav-bar>
method:{
navBack(){
},
navToCart(){
}
}