自定义导航（直接用超简单）

自定义导航（直接用超简单）

第一步：

先在pages.json文件夹中设置：“navigationStyle”: “custom” （取消默认的原生导航栏）

下面是可以根据业务需求设置单页面自定义导航栏

下面需求设置全体页面面自定义导航栏

第二步：将顶部状态栏自定义设置封装成组件提高组件复用性

这是一个组件，将顶部状态栏自定义设置封装成组件提高组件复用性（直接用就可以）

<template><view class="_navbar" :style="{ height:`${trStyle.height + p + bottomEx}px`}"><view class="_navbar_container" :style="{ height:`${trStyle.height}px`,top:`${p}px` }"><!-- @click="uni.navigateBack() 返回事件" --><view  class="_navbar_back"><i class="iconfont icon-arrow-left-bold" style="font-size:40rpx"></i><!-- 左边 --><view class="zuo"><image src="../../static/ylogo.png" mode="" class="img"></image></view><!-- <view class="" style="width: 50rpx;height: 50rpx;"><image src="" style="width: 100%;height: 100%;" mode=""></image></view> --></view><!-- 标题 --><view :style="{ height:`${trStyle.height }px`,lineHeight:`${trStyle.height }px` }" class="_navbar_title"> {{ title }}</view></view></view>
</template><script>export default{name:"Navbar",data(){return {MenuButtonBoundingClientRect(),background :'transparent',bottomEx:10,}},mounted(){	uni.$on('pageScroll',top => {let parentRoute = this.$parent.$utelet pages = getCurrentPages()let page = pages[pages.length - 1]let currentRoute = uteif(parentRoute === currentRoute){this.$nextTick(()=>{if(top === 0) this.background = 'transparent'else if(top > Style.height + p + this.bottomEx) this.background = '#2D248B'else this.background = `rgba(#2D248B, ${ Style.height + p + this.bottomEx })`})}})},beforeUnmount(){uni.$off('pageScroll')},props:{back:{type:Boolean,default:true,},title:{type:String,default:'这是个名字'}},}
</script><style lang="scss">._navbar{width:750rpx;position:fixed;z-index:10000;transition:all 0.2s linear;background: #fff;border-bottom: 1rpx solid rgba(226,226,226,1);margin-bottom: 35rpx;._navbar_container{width:750rpx;position:absolute;padding: 0 30rpx;box-sizing: border-box;left:0;bottom:0;._navbar_back{width: 100rpx;.img{width: 52rpx;height: 52rpx;}color:#000;height:100%;font-size:40rpx;//margin-left:20rpx;cursor:pointer;}._navbar_title{position:absolute;left:50%;top:0rpx;height:100%;transform:translateX(-50%);font-size:30rpx;font-family: 'my-font';font-weight: 600;color:#000;}}}
</style>

第三部 将组件引入页面中

把组件引入保持在最上方 必须放第一行 （两个图都是一个页面，哪里用就在哪里写）

注：只是为了后续自己方便用，方便自己也方便他人