Tuniao UI Uniapp V3TnNavbar-顶部导航栏
该组件一般用于特殊需要自定义顶部导航栏的情况。
注意
如果需要使用图鸟的自定义导航栏，请将原生导航栏的样式设置为custom，详细设置方式请看官方文档: https://uniapp.dcloud.io/collocation/pages?id=custom
组件位置
typescript
import TnNavbar from '@tuniao/tnui-vue3-uniapp/components/navbar/src/navbar.vue'import TnNavbar from '@tuniao/tnui-vue3-uniapp/components/navbar/src/navbar.vue'1
typescript
import TnNavbar from '@/uni_modules/tuniaoui-vue3/components/navbar/src/navbar.vue'import TnNavbar from '@/uni_modules/tuniaoui-vue3/components/navbar/src/navbar.vue'1
平台差异说明
| App(vue) | H5 | 微信小程序 | 支付宝小程序 | ... |
|---|---|---|---|---|
| √ | √ | √ | √ | 适配中 |
基础使用
默认情况下，本组件的高度是根据系统状态栏高度自动计算的，如果需要自定义高度，可以通过height属性来设置。
在H5端中导航栏的高度为45px，左边返回区域的宽度为87px、高度为32px 在非H5中，例如微信小程序、支付宝小程序...中会根据系统的状态栏和右边操作胶囊的位置宽高信息来计算导航栏的高度和返回区域的宽高
默认情况下，组件会同时显示返回上一页和返回首页的按钮，可以通过设置back-icon或者home-icon为空隐藏对应的按钮。
- 通过
back-text设置左边返回区域的文字 - 通过
fixed设置导航栏固定在顶部 - 在默认的
slots中设置导航栏的标题内容信息
vue
<template>
<!-- 固定在顶部 -->
<TnNavbar fixed> TuniaoUI </TnNavbar>
</template><template>
<!-- 固定在顶部 -->
<TnNavbar fixed> TuniaoUI </TnNavbar>
</template>1
2
3
4
2
3
4
vue
<template>
<!-- 设置导航栏的高度 -->
<TnNavbar height="45px"> TuniaoUI </TnNavbar>
<!-- 隐藏返回home页面的按钮 -->
<TnNavbar height="45px" home-icon=""> TuniaoUI </TnNavbar>
<!-- 隐藏返回上一页的按钮 -->
<TnNavbar height="45px" back-icon=""> TuniaoUI </TnNavbar>
<!-- 隐藏返回上一页和返回home页面的按钮 -->
<TnNavbar height="45px" back-icon="" home-icon=""> TuniaoUI </TnNavbar>
<!-- 设置返回上一页文字 -->
<TnNavbar height="45px" back-text="返回"> TuniaoUI </TnNavbar>
</template><template>
<!-- 设置导航栏的高度 -->
<TnNavbar height="45px"> TuniaoUI </TnNavbar>
<!-- 隐藏返回home页面的按钮 -->
<TnNavbar height="45px" home-icon=""> TuniaoUI </TnNavbar>
<!-- 隐藏返回上一页的按钮 -->
<TnNavbar height="45px" back-icon=""> TuniaoUI </TnNavbar>
<!-- 隐藏返回上一页和返回home页面的按钮 -->
<TnNavbar height="45px" back-icon="" home-icon=""> TuniaoUI </TnNavbar>
<!-- 设置返回上一页文字 -->
<TnNavbar height="45px" back-text="返回"> TuniaoUI </TnNavbar>
</template>1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
自定义顶部导航栏的样式
- 通过
bg-color和text-color设置导航栏的背景颜色和字体颜色，可以传递hex、rgb、rgba和图鸟内置颜色的值背景颜色 \ 字体颜色 - 通过
opacity设置导航栏的透明度 - 通过
bottom-shadow隐藏底部的阴影 - 通过
frosted设置导航栏的样式为毛玻璃效果- 在毛玻璃效果开启后
bg-color设置背景色只能通过rgba的方式设置背景颜色
- 在毛玻璃效果开启后
vue
<template>
<!-- 设置酷炫背景色并设置字体为白色 -->
<TnNavbar height="45px" bg-color="tn-gradient__cool-5" text-color="#fff">
TuniaoUI
</TnNavbar>
<!-- 设置导航栏的透明度为0.5 -->
<TnNavbar height="45px" opacity="0.5"> TuniaoUI </TnNavbar>
<!-- 隐藏底部阴影 -->
<TnNavbar height="45px" :bottom-shadow="false"> TuniaoUI </TnNavbar>
<!-- 开启毛玻璃效果 -->
<TnNavbar height="45px" frosted> TuniaoUI </TnNavbar>
<!-- 开启毛玻璃后修改颜色 -->
<TnNavbar height="45px" frosted bg-color="rgba(255, 255, 255, 0.5)">
TuniaoUI
</TnNavbar>
</template><template>
<!-- 设置酷炫背景色并设置字体为白色 -->
<TnNavbar height="45px" bg-color="tn-gradient__cool-5" text-color="#fff">
TuniaoUI
</TnNavbar>
<!-- 设置导航栏的透明度为0.5 -->
<TnNavbar height="45px" opacity="0.5"> TuniaoUI </TnNavbar>
<!-- 隐藏底部阴影 -->
<TnNavbar height="45px" :bottom-shadow="false"> TuniaoUI </TnNavbar>
<!-- 开启毛玻璃效果 -->
<TnNavbar height="45px" frosted> TuniaoUI </TnNavbar>
<!-- 开启毛玻璃后修改颜色 -->
<TnNavbar height="45px" frosted bg-color="rgba(255, 255, 255, 0.5)">
TuniaoUI
</TnNavbar>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
设置内容显示区域
默认情况下显示区域是会将左右两边的操作区域给空出来，如果需要使用左右两边的占位区域，通过以下设置进行修改
- 设置
safe-area-inset-right为false可以将右边的操作区域给空出来 - 设置
back-icon、back-text、home-icon为空可以将左边的操作区域给空出来
vue
<template>
<!-- 占用右边的操作区域 -->
<TnNavbar height="45px" :safe-area-inset-right="false"> TuniaoUI </TnNavbar>
<!-- 内容区域占用整个区域 -->
<TnNavbar
height="45px"
back-icon=""
home-icon=""
:safe-area-inset-right="false"
>
TuniaoUI
</TnNavbar>
</template><template>
<!-- 占用右边的操作区域 -->
<TnNavbar height="45px" :safe-area-inset-right="false"> TuniaoUI </TnNavbar>
<!-- 内容区域占用整个区域 -->
<TnNavbar
height="45px"
back-icon=""
home-icon=""
:safe-area-inset-right="false"
>
TuniaoUI
</TnNavbar>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
自定义返回区域的内容
可以在back的插槽中自定义返回区域的内容
vue
<template>
<TnNavbar height="45px">
TuniaoUI
<template #back>
<view>撤退</view>
</template>
</TnNavbar>
</template><template>
<TnNavbar height="45px">
TuniaoUI
<template #back>
<view>撤退</view>
</template>
</TnNavbar>
</template>1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
自定义右边操作区域的内容
- 通过
right-operation-width参数设置右边操作区域的宽度，设置了该属性之后safe-area-inset-right参数将失效 - 然后通过在
right插槽中定义右边操作区域的内容
vue
<template>
<TnNavbar height="45px" right-operation-width="80">
TuniaoUI
<template #right>
<view>设置</view>
</template>
</TnNavbar>
</template><template>
<TnNavbar height="45px" right-operation-width="80">
TuniaoUI
<template #right>
<view>设置</view>
</template>
</TnNavbar>
</template>1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
拦截返回事件
可以通过before-back事件来拦截返回事件，如果返回false或者返回Promise且被reject则不会进行返回操作 可以通过before-home事件来拦截返回首页事件，如果返回false或者返回Promise且被reject则不会进行返回首页操作
vue
<script lang="ts" setup>
const beforeBack = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(false)
}, 1000)
})
}
</script>
<template>
<TnNavbar height="45px" :before-back="beforeBack"> TuniaoUI </TnNavbar>
</template><script lang="ts" setup>
const beforeBack = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(false)
}, 1000)
})
}
</script>
<template>
<TnNavbar height="45px" :before-back="beforeBack"> TuniaoUI </TnNavbar>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
API
Props
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| height | 导航栏高度，默认单位为 rpx，可以传入带单位的尺寸值 | String | - | - |
| bg-color | 背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgba，在frosted为true的时候只可以设置 rgba 类型的值 | String | - | - |
| text-color | 文字颜色，支持图鸟内置的颜色值、hex、rgb、rgba | String | - | - |
| frosted | 开启毛玻璃效果，在支付宝小程序中该参数无效 | Boolean | false | true |
| opacity | 导航栏透明度，有效值为 0~1 | Number | 1 | - |
| back-icon | 返回按钮图标 | String | left | 图标有效值 |
| back-text | 返回按钮文字 | String | - | - |
| home-icon | 返回首页图标 | String | home-capsule-fill | 图标有效值 |
| bottom-shadow | 是否显示底部阴影 | Boolean | true | false |
| safe-area-inset-right | 是否预留右边胶囊安全距离 | Boolean | true | false |
| center | 居中显示内容 | Boolean | true | false |
| right-operation-width | 右边操作区域的宽度，默认单位为 rpx，可以传入带单位的尺寸值，设置该参数后safe-area-inset-right失效 | String | - | - |
| before-back | 返回前回调 | Promise<boolean>| boolean | - | - |
| before-home | 返回首页前回调 | Promise<boolean>| boolean | - | - |
| index-url | 首页地址 | String | /pages/index/index | - |
| fixed | 是否固定在顶部 | Boolean | false | true |
| placeholder | 在固定后是否开启占位 | Boolean | true | false |
| z-index | ZIndex | Number | 20090 | - |
Emits
| 事件名 | 说明 | 类型 |
|---|---|---|
| init-finish | 导航栏初始化完毕 | (info: NavbarRectInfo) => void |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 导航栏内容 |
| back | 返回区域内容 |
| right | 右边操作区域内容 |
NavbarRectInfo
| 参数 | 说明 |
|---|---|
| statusHeight | 状态栏高度 |
| height | 导航栏高度 |