uniapp开发微信小程序--自定义顶部导航栏

一、实现效果：

在这里插入图片描述

二、代码实现：

1.在`pages.json`文件中，单页面定义导航栏，添加以下代码：

"navigationStyle": "custom" //自定义导航栏

如图所示：
在这里插入图片描述

2.在`components`文件夹下，封装一个组件`navBar.vue`：

<template><view class="prohibition"><view class="demo" :style="[{background},{color},{height},{paddingTop}]"><!-- 左侧 --><view class="returnback" @click="returnBack"><image src="../static/images/more_user2@2x.png" mode=""></image></view><!-- 中间标题文字 --><view class="title">{{title}}</view></view></view>
</template><script>export default {name: 'navbarny',data() {return {height: 0,paddingTop: 0,index: '',}},// props: ["title", "back"],props: {//接收的值// topArray: [],// index: '',title: { // 标题文字(默认为空)type: String,default: ''},color: { // 标题和返回按钮颜色(默认白色)type: String,default: '#333333'},//建议使用background  因为使用backgroundColor，会导致不识别渐变颜色background: { // 背景颜色(不传值默认透明)type: String,default: 'transparent'},back: { // 是否显示返回按钮(不传值默认不显示)type: Boolean,default: false},},mounted(){// this.cityname = uni.getStorageSync('citynames')// console.log('shi',this.cityname)},created() {const demo = uni.getMenuButtonBoundingClientRect()this.height = demo.height + "px"this.paddingTop = demo.top + "px"},methods: {bindPickerChange: function(e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.index = e.detail.value},areaFun(){uni.navigateTo({url:'/pages/SelectArea/area'})},returnBack(){uni.navigateBack()}}}
</script>
<style lang="less">.demo {position: relative; //注意，建议使用相对定位，因为固定定位会脱离文档流，然后你还要去设置marginTop值// position: fixed;width: 100%;display: flex;align-items: center;justify-content: center;z-index: 100;padding-bottom: 10rpx;height: 70rpx !important;.returnback{position: absolute;bottom: 10rpx;left: 30rpx;height:60rpx; transform: rotate(-180deg);display: flex;align-items: center;image{width: 19rpx;height: 31rpx;}}.left {position: absolute;max-width: 280rpx;height: 60rpx;line-height: 44rpx;top: 0;bottom: 0;left: 70rpx;margin: auto;font-size: 24rpx;font-family: Microsoft YaHei UI;font-weight: 400;color: #fff;display: flex;align-items: center;image {width: 24rpx;height: 24rpx;margin-left: 7rpx;}.uni-input {max-width: 220rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}}.title {font-size: 32rpx;font-weight: bold;font-stretch: normal;letter-spacing: r1px;color: #33333;}}
</style>

3.在页面中引用使用组件：（注：写在页面的最上面）

<navbar class="header" :title="title"></navbar><script>import navbar from '@/components/navBar.vue'export default {components: {navbar},data() {return {title: '首页',}},}
</script><style>.header{width: 100%;height: auto;position: fixed;top: 0;left: 0;height: 150rpx;background-image: url('../../static/images/bg@2x_01.png');background-size: 100% 100%;background-repeat: no-repeat;background-position: 0 0;z-index: 9999;}
</style>