更新记录
1.1.8(2025-10-21) 下载此版本
添加title点击事件clickTitle
1.1.7(2025-10-20) 下载此版本
更新
1.1.6(2025-06-05) 下载此版本
更新
查看更多平台兼容性
uni-app
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|
| √ | - | √ | √ | √ | - | - | - | - |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|
| - | - | - | - | - | - | - | - | - | - | - |
其他
| 多语言 | 暗黑模式 | 宽屏模式 |
|---|---|---|
| × | × | √ |
使用说明
菜单弹窗使用uview1.0,使用前请先安装uview1.0,可以自行修改菜单弹窗;需要隐藏原生导航栏;胶囊位置固定不可改变,支持自定义内容;推荐注册为全局组件方便使用。
使用方式
安装后可直接使用,插件符合uni_modules规则
在页面中使用组件
<zh-navbar @closeApplet='closeApplet' ref='zhNavbar'
@closeApplet='closeApplet' ref='zhNavbar' title='自定义导航栏'></zh-navbar>
参数说明
Props
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| height | Number | 98 | 导航栏高度(单位rpx) |
| isLeft | Boolean | true | 是否显示左侧返回按钮 |
| isBack | Boolean | false | 是否自定义左侧返回逻辑 |
| zIndex | Number | 99999 | z-index值 |
| title | String | 导航栏中间文字 | |
| title_style | Object | {} | 导航栏中间样式 |
| bgColor | String | #fff | 导航栏背景颜色 |
| capsuleBgcolor | String | rgba(255, 255, 255, 0.6) | 胶囊背景颜色 |
| backTheme | String | black | 左侧返回箭头主题颜色,可选black white |
| disabled | Boolean | false | 是否禁用胶囊菜单 |
Slot 插槽 (default插槽会覆盖其余两个插槽)
| 参数 | 说明 |
|---|---|
| default | 自定义中间部分内容 |
| left | 中间文字右边侧插槽 |
| right | 中间最右侧插槽 |
Event 事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| getBack | 左侧自定义返回事件 | |
| clickTitle | title点击事件 |
示例
<template>
<view class="">
<!-- 导航栏 -->
<zh-navbar @closeApplet='closeApplet' ref='zhNavbar'
@closeApplet='closeApplet' ref='zhNavbar' title='自定义导航栏' :isLeft='false'></zh-navbar>
</view>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
},
};
</script>
<style lang="scss" scoped>
</style>

收藏人数:
下载插件并导入HBuilderX
赞赏(0)
下载 2183
赞赏 1
下载 11986587
赞赏 1823
赞赏
京公网安备:11010802035340号