uniapp-navigation-bar
是小程序的顶部导航组件,当页面配置 navigationStyle
设置为 custom
的时候可以使用此组件替代原生导航栏。
第一步,隐藏导航栏 navigationStyle: custom
。
第二步,导航栏标题颜色及状态栏前景颜色 navigationBarTextStyle: black/white
,或者是调用 uni.setNavigationBarColor({ frontColor: 'xxx', backgroundColor: 'xxx' })
。
注意
- QQ小程序
setNavigationBarColor
设置backgroundColor
会导致状态栏有颜色,遮罩了自定义状态栏,所以需要将backgroundColor
设置为rgba(0,0,0,0)
,即透明颜色。当然直接配置navigationBarTextStyle: black/white
是最好的。 - 头条小程序下,
setNavigationBarColor
没办法改变胶囊的颜色。直接配置navigationBarTextStyle: black/white
是可以的。 - 百度小程序由于缺少 appid ,没办法在真机跑测,目前在开发者工具发现 svg 背景图按钮没办法显示出来。
第一步,隐藏导航栏 "transparentTitle": "always", "titlePenetrate": "YES"
。
第二步,导航栏标题颜色及状态栏前景颜色 titleBarColor: '#ffffff'
。当 titleBarColor
为 #ffffff
时,按钮是蓝色的,文字是黑色的;当 titleBarColor
非 #ffffff
时,按钮是白色的,文字是白色的。同样的也可以调用 uni.setNavigationBarColor({ frontColor: 'xxx', backgroundColor: 'xxx' })
进行设置。
注意
- 支付宝小程序是没办法去除左边返回按钮的
- 没有
getMenuButtonBoundingClientRect
这个方法,获取不到胶囊的位置 uni.hideAllFavoriteMenu()
可以隐藏所有页面右上角的收藏按钮
npm i uniapp-navigation-bar -S
# 组件中使用到了 `scss` ,所以需要安装 `node-sass` 和 `sass-loader`,已安装可跳过
npm i node-sass sass-loader -D
...
process.UNI_LIBRARIES = process.UNI_LIBRARIES || ['@dcloudio/uni-ui']
const UNI_LIBRARIES = process.UNI_LIBRARIES // <-- 修改1
UNI_LIBRARIES.push('uniapp-navigation-bar') // <-- 修改2
UNI_LIBRARIES.forEach(libraryName => { // <-- 修改3
plugins.push([
'import',
{
'libraryName': libraryName,
'customName': (name) => {
return `${libraryName}/lib/${name}/${name}`
}
},
libraryName // <-- 修改4
])
})
...
<template>
<div>
<navigation-bar title="自定义导航栏" ref="navBar" />
</div>
</template>
<script>
// 方式一
import { NavigationBar } from 'uniapp-navigation-bar'
// 方式二
// import NavigationBar from 'uniapp-navigation-bar/lib/navigation-bar/navigation-bar'
export default {
components: {
NavigationBar
}
}
</script>
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
ext-class | string | 否 | 添加在组件内部结构的 class,可用于修改组件内部的样式 | |
title | string | 否 | 导航标题,如果不提供,则名为 renderCenter 的 slot 有效 | |
background | string | #ffffff | 否 | 导航背景色 |
backgroundColorTop | string | background | 否 | 导航下拉背景色,默认取 background 的颜色,不理解见 issue 问题 |
color | string | #000000 | 否 | 导航字体颜色 |
iconTheme | string | black | 否 | 主题图标和字体颜色,当背景色为深色时,可以设置'white' |
back | boolean | false | 否 | 是否显示返回按钮,默认点击按钮会执行 @back 事件,如果为 false,则名为 left 的 slot 有效 |
home | boolean | false | 否 | 是否显示 home 按钮,执行方法自定义,或者看例子 |
searchBar | boolean | false | 否 | 是否显示搜索框,默认点击按钮会执行 @search 事件,如果为 false,则名为 center 的 slot 有效 |
searchText | string | 点我搜索 | 否 | 搜索框文字 |
backFn | boolean | false | 否 | 是否自定义返回按钮事件,即是否执行 @back 事件 |
autoSetNbc | boolean | false | 否 | 是否根据 iconTheme 自动设置导航栏标题颜色及状态栏前景颜色,当为 true 的时候,则会调用 setNavigationBarColor 进行设置 |
名称 | 描述 |
---|---|
left | 左侧 slot,在 back 按钮位置显示,当 back 为 false 的时候有效 |
center | 标题 slot,在标题位置显示,当 searchBar 为 false title 为空的时候有效 |
right | 在导航的右侧显示 |
事件 | 说明 |
---|---|
@home | 在 home 为 true 时,点击 home 按钮触发此事件 |
@back | 在 back 为 true 时,点击 back 按钮触发此事件,detail 包含 delta |
@search | 在 searchBar 为 true 时,点击 search 按钮触发此事件 |
由于 uni-app
组件里不支持 onShow
事件,所以要解决iPhone 手机打电话和开热点导致导航栏样式错乱的问题,需要在组件使用的页面的 onShow
方法里去调用 NavBar
组件的 refreshSystemInfo
方法。
pageA.vue
<template>
<div>
<navigation-bar ref="navBar" />
</div>
</template>
<script>
export default {
...
onShow() {
if (this.$refs.navBar) {
this.$refs.navBar.refreshSystemInfo && this.$refs.navBar.refreshSystemInfo()
}
},
...
}
</script>