第一步：App.vue页面的onShow钩子内写入获取手机基本信息代码
onShow: function() {
console.log('App Show');
uni.getSystemInfo({
success: (result) => {
// 获取手机系统的状态栏高度（不同手机的状态栏高度不同） （ 不要使用uni-app官方文档的var(--status-bar-height) 官方这个是固定的20px 不对的 ）
// console.log('当前手机的状态栏高度',result.statusBarHeight)
let statusBarHeight = result.statusBarHeight + 'px'
// 获取右侧胶囊的信息 单位px
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
//bottom: 胶囊底部距离屏幕顶部的距离
//height: 胶囊高度
//left: 胶囊左侧距离屏幕左侧的距离
//right: 胶囊右侧距离屏幕左侧的距离
//top: 胶囊顶部距离屏幕顶部的距离
//width: 胶囊宽度
// console.log(menuButtonInfo.width, menuButtonInfo.height, menuButtonInfo.top)
// console.log('计算胶囊右侧距离屏幕右边距离', result.screenWidth - menuButtonInfo.right)
let menuWidth = menuButtonInfo.width + 'px'
let menuHeight = menuButtonInfo.height + 'px'
let menuBorderRadius = menuButtonInfo.height / 2 + 'px'
let menuRight = result.screenWidth - menuButtonInfo.right + 'px'
let menuTop = menuButtonInfo.top + 'px'
let contentTop = result.statusBarHeight + 44 + 'px'
let menuInfo = {
statusBarHeight: statusBarHeight,//状态栏高度----用来给自定义导航条页面的顶部导航条设计padding-top使用：目的留出系统的状态栏区域
menuWidth: menuWidth,//右侧的胶囊宽度--用来给自定义导航条页面的左侧胶囊设置使用
menuHeight: menuHeight,//右侧的胶囊高度--用来给自定义导航条页面的左侧胶囊设置使用
menuBorderRadius: menuBorderRadius,//一半的圆角--用来给自定义导航条页面的左侧胶囊设置使用
menuRight: menuRight,//右侧的胶囊距离右侧屏幕距离--用来给自定义导航条页面的左侧胶囊设置使用
menuTop: menuTop,//右侧的胶囊顶部距离屏幕顶部的距离--用来给自定义导航条页面的左侧胶囊设置使用
contentTop: contentTop,//内容区距离页面最上方的高度--用来给自定义导航条页面的内容区定位距离使用
}
uni.setStorageSync('menuInfo', menuInfo)
},
fail: (error) => {
console.log(error)
}
})
},
第二步：在components下新建组件 navBar，页面代码！
<template>
<view class="index-page">
<!-- paddingTop不生效可换成marginTop -->
<view class="tab_title" :style="{ paddingTop: statusBarHeight}">
<!-- 左上角自定义样式 -->
<view class="menu_btn box-sizing"
:style="{ position: 'fixed', top: menuTop, left: menuRight, width: menuWidth, height: menuHeight, borderRadius: menuBorderRadius}">
<image class="arrowleft" src="/static/image/fanhui.png" @click="navBack"></image>
<view class="text_box"></view>
<image class="home" src="/static/image/home.png" @click="navBackHome"></image>
</view>
<div class="title">
{{ title }}
</div>
</view>
</view>
</template>
<script>
export default {
props: {
title: {
default: "",
},
},
data() {
return {
statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,//状态栏的高度（可以设置为顶部导航条的padding-top）
menuWidth: uni.getStorageSync('menuInfo').menuWidth,
menuHeight: uni.getStorageSync('menuInfo').menuHeight,
menuBorderRadius: uni.getStorageSync('menuInfo').menuBorderRadius,
menuRight: uni.getStorageSync('menuInfo').menuRight,
menuTop: uni.getStorageSync('menuInfo').menuTop,
contentTop: uni.getStorageSync('menuInfo').contentTop,
}
},
methods: {
navBack(){
uni.navigateBack({
delta: 1
});
const pages = getCurrentPages();
console.log("pages_________",pages);
},
navBackHome(){
uni.reLaunch({
url: '/pages/home/index'
})
},
},
}
</script>
<style lang="scss" scoped>
.box-sizing {
box-sizing: border-box;
}
.index-page {
width: 100vw;
height: 64px;
.tab_title {
width: 100%;
height: 44px !important;
line-height: 44px;
text-align: center;
background-color: #f8f8f8 !important;
position: fixed;
top: 0;
z-index: 9999;
color: #000;
font-weight: 500;
.title{
}
.menu_btn {
width: 170rpx !important;
background-color: #ffffff;
border: 1px solid #e0e0e0;
display: flex;
align-items: center;
justify-content: center;
.arrowleft {
width: 10px;
height: 14px;
padding: 5px 10px 5px 5px;
}
.text_box {
width: 1rpx;
height: 20px;
background-color: #ddd;
margin-right: 7px;
margin-left: 4px;
}
.home {
width: 14px;
height: 14px;
padding: 6px;
}
}
}
}
</style>
第三步：main.js里引入，方便使用；
import navBar from './components/navBar/index'
Vue.component('nav-bar', navBar)
第四步：页面直接使用组件
<nav-bar :title="title"></nav-bar>
title就是各个页面的名称了，无需多言！
以上这些你都弄完以后发现并没有生效，那是因为还缺少了最重要也是最简单的一步：
在需要使用组件页面对应的 .json文件内 写入代码"navigationStyle": "custom"，获得导航栏的控制权
```
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
```
或者在app.json文件中，window项中配置"navigationStyle": "custom"
自定义导航！自此完成！
