本篇主要讲述如何自定义顶部导航栏,有时候默认导航栏不足以满足我们的需求,这时候就需要自定义导航栏来解决这个问题。
目录
- 默认导航
- 修改配置
- 自定义顶部
默认导航
自带的默认顶部导航设置的内容有限,不容易扩展修改,因此如果有更加个性化的需求,则需要自定义顶部导航。
配置如下:
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "HelloApp",
"navigationBarBackgroundColor": "#333",
"backgroundColor": "#f8f8f8"
}
更多配置查看:https://uniapp.dcloud.net.cn/collocation/pages.html#globalstyle
修改配置
在pages.json
文件中的globalStyle
加一个配置。
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "HelloApp",
"navigationBarBackgroundColor": "#333",
"backgroundColor": "#f8f8f8",
"navigationStyle": "custom"
}
这样我们就可以自定义顶部导航了。
自定义顶部
使用官方插件
- 官方自定义顶部导航文档
- 官方图标库文档
基本用法如下:
<uni-nav-bar left-icon="left" right-icon="cart" title="标题" left-text="返回" right-text="设置" />
自己编写组件
有时候官方的自定义顶部导航可能还是达不到我们的需求,这时候可以自己编写一个自定义顶部导航组件,更加灵活高效。
编写组件
在components
下面新建文件夹q-navbar
和文件q-navbar.vue
。
- html 部分
这部分就是使用flex
布局的一个导航,里面是否绑定了很多父组件的消息,可以自定义左边、中间、右边的图标、名称和是否显示。
还有一个特色就是如果不想使用默认的,可以使用slot
插槽自己写适合自己的那块内容。
<view
class="q-navbar"
:style="{'color': props.color, 'backgroundColor': props.bgColor, 'border-bottom': `2rpx solid ${props.borColor}`}">
<slot name="navbar">
<view class="q-navbar-left">