uni-nav-bar 自定义导航栏
导航栏组件，主要用于头部导航。
# 介绍
注意事项
为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
- 组件需要依赖
sass插件 ，请根据提示自行手动安装 - 组件内部依赖
'uni-icons'组件 - 请勿在组件内部使用，宽度可能会发生错误
- 当前组件不支持文字大小的修改 ，如有需要请使用深度选择器覆盖样式
# 基本用法
<uni-nav-bar title="导航栏组件"></uni-nav-bar>
1
# 开启阴影
使用 shadow 属性开启导航栏阴影
Tips:
- nvue 下某些机型可能显示不正常 ，建议 nvue 下关闭阴影
<uni-nav-bar shadow title="导航栏组件"></uni-nav-bar>
1
# 开启暗黑主题
使用 dark 属性开启导航栏的暗黑主题
Tips:
- 暗黑主题只会改变组件默认的前景色和背景色，如果设置自定义颜色，自定义颜色将优先显示
<uni-nav-bar dark title="导航栏组件"></uni-nav-bar>
1
# 自定义颜色
使用 color 属性修改导航栏前景色（文字图标颜色）
使用 background-color 属性修改导航栏背景色
<uni-nav-bar dark title="导航栏组件"></uni-nav-bar>
1
# 带左右文字
使用 left-text 属性设置导航栏左侧文字
使用 right-text 属性设置导航栏右侧文字
Tips:
- 图标依赖
uni-icons组件 ，可用图标类型参考 uni-icons 示例 (opens new window)
<uni-nav-bar left-text="返回" right-text="设置" title="标题" />
1
# 带左右图标
使用 left-icon 属性设置导航栏左侧图标
使用 right-icon 属性设置导航栏右侧图标
Tips:
- 图标依赖
uni-icons组件 ，可用图标类型参考 uni-icons 示例 (opens new window) - right-text 和 right-icon 属性不能同时存在，如需都使用，请使用 right 插槽自定义
<uni-nav-bar left-icon="left" right-icon="cart" title="标题" />
1
# 自定义高度
使用 height 属性设置导航栏高度
Tips:
- 组件默认高度为44px
- 如使用 Number 类型传值默认单位为 px，使用 String 类型传值则必须带单位，如传值无效 ，则使用默认值
<uni-nav-bar height="120rpx" title="自定义高度" />
1
# API
# NavBar Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title | String | - | 标题文字 |
| leftText | String | - | 左侧按钮文本 |
| rightText | String | - | 右侧按钮文本 |
| leftIcon | String | - | 左侧按钮图标（图标类型参考 Icon 图标 (opens new window) type 属性） |
| rightIcon | String | - | 右侧按钮图标（图标类型参考 Icon 图标 (opens new window) type 属性） |
| color | String | #000000 | 图标和文字颜色 |
| backgroundColor | String | #FFFFFF | 导航栏背景颜色 |
| fixed | Boolean | false | 是否固定顶部 |
| statusBar | Boolean | false | 是否包含状态栏 |
| shadow | Boolean | false | 导航栏下是否有阴影 |
| border | Boolean | true | 导航栏下是否有边框 |
| height | Number/String | 44 | 导航栏高度 |
| dark | Boolean | false | 导航栏开启暗黑模式 |
| leftWidth | Number/String | 120rpx | 导航栏左侧插槽宽度 |
| rightWidth | Number/String | 120rpx | 导航栏右侧插槽宽度 |
| stat | Boolean/String | 120rpx | 是否开启统计标题功能。注意：只有使用title 属性 ，且开启了统计功能才生效 |
Tips
leftWidth和rightWidth如无必要不需要设置leftWidth和rightWidth如需设置 ，只有两个值相同，才能保证title居中 ，如设置值过大，需要注意到title被覆盖的可能
# NavBar Slots
支持向 NavBar 里插入不同内容，以达到自定义的目的。
| slot名 | 说明 |
|---|---|
| default | 向导航栏中间插入 |
| left | 向导航栏左侧插入 |
| right | 向导航栏右侧插入 |
<uni-nav-bar>
<view>标题栏</view>
<view v-slot:left>left</view>
<view v-slot:right>right</view>
</uni-nav-bar>
1
2
3
4
5
2
3
4
5
# NavBar Events
| 事件名 | 说明 | 返回值 |
|---|---|---|
| @clickLeft | 左侧按钮点击时触发 | - |
| @clickRight | 右侧按钮点击时触发 | - |
# 示例
注意
示例依赖了 uni-card uni-section uni-scss 等多个组件，直接拷贝示例代码将无法正常运行 。
请到 组件下载页面 (opens new window) ，在页面右侧选择 使用 HBuilderX导入示例项目 ，体验完整示例演示 (opens new window)。
<template>
<view class="container">
<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
title="自定义导航栏" @clickLeft="back" />
<uni-card is-full :isShadow="false">
<text
class="uni-h6">本导航栏为自定义组件，并非原生导航栏。除非原生导航栏无法满足需求，否则不推荐使用自定义导航栏组件。具体参考https://ask.dcloud.net.cn/article/34921</text>
</uni-card>
<uni-section title="基本用法" subTitle="使用 title 属性设置导航栏标题" type="line" style="margin-bottom: 3px;">
<view class="box-bg">
<uni-nav-bar title="标题" />
</view>
</uni-section>
<uni-section title="开启阴影" subTitle="使用 shadow 属性启用阴影" type="line" style="margin-bottom: 3px;">
<view class="box-bg">
<uni-nav-bar shadow left-icon="left" title="开启阴影" @clickLeft="back" />
</view>
</uni-section>
<uni-section title="开启暗黑模式" subTitle="使用 dark 属性设置暗黑模式" type="line" style="margin-bottom: 3px;">
<view class="box-bg">
<uni-nav-bar shadow left-icon="left" dark title="暗黑模式" @clickLeft="back" />
</view>
</uni-section>
<uni-section title="带返回箭头+右侧图标" subTitle="使用 left-icon/right-icon 设置左右图标" type="line"
style="margin-bottom: 3px;">
<view class="box-bg">
<uni-nav-bar shadow left-icon="left" right-icon="cart" title="标题" />
</view>
</uni-section>
<uni-section title="左侧文字+右侧文字" subTitle="使用 left-text/right-text 设置左右文字" type="line"
style="margin-bottom: 3px;">
<view class="box-bg">
<uni-nav-bar shadow left-icon="left" leftText="返回" rightText="设置" title="标题" />
</view>
</uni-section>
<uni-section title="自定义颜色" subTitle="使用 color/background-color 属性设置前景背景色" type="line"
style="margin-bottom: 3px;">
<view class="box-bg">
<view class="box-bg">
<uni-nav-bar dark color="#999" backgroundColor="#f5f5f5" shadow left-icon="left" leftText="返回"
rightText="设置" title="自定义颜色" />
</view>
</view>
</uni-section>
<uni-section title="自定义高度" subTitle="使用 height 修改组件高度" type="line" style="margin-bottom: 3px;">
<view class="box-bg">
<view class="box-bg">
<uni-nav-bar height="65px" dark shadow left-icon="left" leftText="返回" rightText="设置"
title="自定义高度" />
</view>
</view>
</uni-section>
<uni-section title="自定义内容" subTitle="使用 left/right/default 插槽自定义内容" type="line" style="margin-bottom: 3px;">
<view class="box-bg">
<uni-nav-bar>
<block slot="left">
<view class="city">
<view>
<text class="uni-nav-bar-text">{{ city }}</text>
</view>
<uni-icons type="arrowdown" color="#666" size="18" />
</view>
</block>
<view class="input-view">
<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
@confirm="confirm" />
</view>
<block slot="right">
<view class="city">
搜索
</view>
</block>
</uni-nav-bar>
</view>
</uni-section>
</view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<script>
export default {
components: {},
data() {
return {
city: '北京'
}
},
methods: {
back() {
uni.navigateBack({
delta: 1
})
},
showMenu() {
uni.showToast({
title: '菜单'
})
},
clickLeft() {
uni.showToast({
title: '左侧按钮'
})
},
search() {
uni.showToast({
title: '搜索'
})
},
showCity() {
uni.showToast({
title: '选择城市'
})
},
scan() {
uni.showToast({
title: '扫码'
})
},
confirm() {
uni.showToast({
title: '搜索'
})
}
},
onPullDownRefresh() {
console.log('onPullDownRefresh')
setTimeout(function() {
uni.stopPullDownRefresh()
console.log('stopPullDownRefresh')
}, 1000)
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<style lang="scss">
$nav-height: 30px;
.box-bg {
background-color: #F5F5F5;
padding: 5px 0;
}
.city {
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: flex-start;
// width: 160rpx;
margin-left: 4px;
}
.input-view {
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
flex-direction: row;
// width: 500rpx;
flex: 1;
background-color: #f8f8f8;
height: $nav-height;
border-radius: 15px;
padding: 0 15px;
flex-wrap: nowrap;
margin: 7px 0;
line-height: $nav-height;
}
.input-uni-icon {
line-height: $nav-height;
}
.nav-bar-input {
height: $nav-height;
line-height: $nav-height;
/* #ifdef APP-PLUS-NVUE */
width: 370rpx;
/* #endif */
padding: 0 5px;
font-size: 12px;
background-color: #f8f8f8;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
编辑此页 (opens new window)
上次更新: 2025/02/03, 00:09:13