1. 概述
Uniapp是一个多端开发框架，支持以一份代码生成H5、小程序、APP等多种平台的应用。在Uniapp开发中，自定义导航栏对于提升用户体验、增强APP的品牌特色非常重要。本文将介绍在Uniapp中如何自定义导航栏。
2. 使用全局导航栏组件
2.1 创建全局导航栏组件
首先需要创建一个全局导航栏组件。在Uniapp的工程目录下，找到components文件夹，其中新建navbar文件夹，再在navbar文件夹中新建navbar.vue文件，如下代码所示：
<template>
<div class="navbar">
<div class="navbar-left">
<slot name="left"></slot>
</div>
<div class="navbar-title">
<slot name="title"></slot>
</div>
<div class="navbar-right">
<slot name="right"></slot>
</div>
</div>
</template>
<script>
export default {
name: "navbar",
data() {
return {};
},
};
</script>
<style scoped>
.navbar {
height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #f5f5f5;
font-weight: bold;
box-shadow: 0px 1px 15px #c3c3c3;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}
.navbar-left,
.navbar-right {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-start;
}
.navbar-right {
justify-content: flex-end;
}
.navbar-title {
flex: 2;
text-align: center;
font-size: 18px;
}
</style>
上述代码中，我们定义了一个navbar的全局组件，并给组件设置了固定高度、背景颜色、阴影、固定位置，以及左中右三个位置分别放置组件的插槽。此外，navbar组件在样式中设置了各个组件的排版方式。
2.2 在页面中使用navbar组件
在页面中使用navbar组件需要在页面的.vue文件中引入navbar组件，并在页面中使用，如下代码所示：
<template>
<div class="page">
<navbar>
<template v-slot:left>
<img src="~@/assets/images/back.png" alt="" />
</template>
<template v-slot:title>自定义导航栏</template>
</navbar>
<div class="content">
<p>页面主要内容</p>
</div>
</div>
</template>
<script>
import navbar from "@/components/navbar/navbar.vue";
export default {
components: {
navbar,
},
data() {
return {};
},
};
</script>
<style scoped>
.content {
margin-top: 44px;
padding: 10px;
}
</style>
上述代码中，我们在页面中引入了navbar组件，并在navbar组件的左插槽中设置了一个返回图标，右插槽中没有设置内容，中间插槽中设置了一个标题。此外，在页面中我们设置了一个content类的样式，用于设置页面主内容的位置。
3. 使用页面级导航栏组件
3.1 创建页面级导航栏组件
有时候需要在页面中使用自定义的导航栏，可以通过创建页面级导航栏组件来实现。在页面的.vue文件中，新建navbar.vue文件，如下代码所示：
<template>
<div class="navbar">
<div class="navbar-left" @click="back">
<img src="~@/assets/images/back.png" alt="" />
</div>
<div class="navbar-title">页面级导航栏</div>
<div class="navbar-right" @click="search">
<img src="~@/assets/images/search.png" alt="" />
</div>
</div>
</template>
<script>
export default {
name: "navbar",
methods: {
back() {
uni.navigateBack();
},
search() {
uni.showToast({
title: "搜索",
});
},
},
};
</script>
<style scoped>
.navbar {
height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
font-weight: bold;
box-shadow: 0px 1px 15px #c3c3c3;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}
.navbar-left,
.navbar-right {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-start;
}
.navbar-right {
justify-content: flex-end;
}
.navbar-title {
flex: 2;
text-align: center;
font-size: 18px;
color: #333;
}
</style>
上述代码中，我们创建了一个页面级的navbar组件，并设置了组件的样式，左插槽中设置了返回图标并添加了事件，右插槽中设置了搜索图标并添加了事件，中间插槽中设置了标题。此外，navbar组件中添加了两个方法，分别用于返回和搜索。
3.2 在页面中使用页面级导航栏组件
在页面的.vue文件中引入navbar组件，并在页面中适当位置使用，如下代码所示：
<template>
<div class="page">
<navbar/>
<div class="content">
<p>页面主要内容</p>
</div>
</div>
</template>
<script>
import navbar from "@/pages/index/navbar.vue";
export default {
components: {
navbar,
},
data() {
return {};
},
};
</script>
<style scoped>
.content {
margin-top: 44px;
padding: 10px;
}
</style>
上述代码中，我们在页面中引入了navbar组件，并在页面的适当位置使用。此外，在style中设置了content类的样式来调整页面主要内容的位置。
4. 总结
本文主要介绍了在Uniapp中如何自定义导航栏。我们可以使用全局导航栏组件和页面级导航栏组件来实现导航栏的自定义。全局导航栏组件可以设置成主题风格的导航栏，应用于多个页面，适用于实现应用整体一致性。页面级导航栏组件则适用于某个页面自定义的导航栏，可以通过页面级导航栏组件的方式来实现。两种方式都需要与页面的主要内容相适应，从而提高用户的体验。