更新记录
1.1.3(2024-11-21) 下载此版本
添加禁用菜单
1.1.2(2024-11-11) 下载此版本
优化
1.1.1(2024-11-11) 下载此版本
优化
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 4.0 app-vue | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | × | √ | √ | √ |
使用说明
菜单弹窗使用uview1.0,使用前请先安装uview1.0,可以自行修改菜单弹窗;需要隐藏原生导航栏;胶囊位置固定不可改变,支持自定义内容;推荐注册为全局组件方便使用。
使用方式
安装后可直接使用,插件符合uni_modules规则
在页面中使用组件
<zh-navbar 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 | 左侧自定义返回事件 |
示例
<template>
<view class="">
<!-- 导航栏 -->
<zh-navbar title='自定义导航栏' :isLeft='false'></zh-navbar>
</view>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
},
};
</script>
<style lang="scss" scoped>
</style>