更新记录

1.2.7(2022-12-28)

h5上面也兼容苹果14(iphone15.2系统)顶部间距问题

1.2.6(2022-12-26)

修改插槽外面文件夹

1.2.5(2022-12-26)

更新了一下样式

查看更多

平台兼容性

Vue2 Vue3
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(){

    }
}

隐私、权限声明

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

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

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

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问