机型：荣耀 magic2 微信版本号：7.0.19 系统版本号：10.1.0.162

机型：小米 微信版本号：7.0.19 系统版本号：10.3.10

首页代码

<template>
	<div class='user savepadding  flex flex-direction'>
		<!-- 自定义头部 -->
		<use-navbar ref="useNavbar" class='followTop'></use-navbar>
	</div>
</template>
<script>
  import useNavbar from './components/use-navbar.vue'
  export default {
    components: {
	useNavbar,
    }
 }
  </script>

useNavbar组件

<template>
	<div class="customNavBar">
		<u-navbar :background="background" class="navbar" :isBack="false" :height="navBarHeight"></u-navbar>
	</div>
</template>

<script>
	import unavbar from '@/components/u-navbar/u-navbar'
	export default {
		components: {
			unavbar
		},
		data() {
			return {
				background: {},
				navBarHeight: 84, //自定义头部高度
			};
		},
		mounted() {
			let height = uni.getStorageSync('systemType') == 'IOS' ? 48 : 44
			this.navBarHeight = uni.getStorageSync('isAddToDeskTop') ? height : height + uni.upx2px(72)
		},
		
	};
</script>

<style lang="scss">
	.customNavBar {
		.navbar {
			position: relative;
		}
	}
</style

unavbar 公共组件

<template>
	<view class="">
		<view class="u-navbar" :style="[navbarStyle]" :class="{'u-navbar-fixed': isFixed, 'u-border-bottom': borderBottom}">
			<view class="u-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="u-navbar-inner" :style="[navbarInnerStyle]">
				<view class="u-back-wrap" v-if="isBack" @tap="goBack">
					<view class="u-icon-wrap">
						<uni-icons type="arrowleft" :size="backIconSize" :color="backIconColor"></uni-icons>
					</view>
					<view class="u-icon-wrap u-back-text u-line-1" v-if="backText" :style="[backTextStyle]">
						{{backText}}
					</view>
				</view>
				<view class="u-navbar-content-title" v-if="title" :style="[titleStyle]">
					<view class="u-title u-line-1" :style="{
						color: titleColor,
						fontSize: titleSize + 'rpx'
					}">
						{{title}}
					</view>
				</view>
				<view class="u-slot-content">
					<slot></slot>
				</view>
				<view class="u-slot-right">
					<slot name="right"></slot>
				</view>
			</view>
		</view>
		<!-- 解决fixed定位后导航栏塌陷的问题 -->
		<view class="u-navbar-placeholder" v-if="isFixed" :style="{width: '100%',height: Number(navbarHeight) + statusBarHeight + 'px'}">

		</view>
	</view>
</template>

<script>
	// 获取系统状态栏的高度
	let systemInfo = uni.getSystemInfoSync();
	let menuButtonInfo = {};
	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	
	export default {
		name: "u-navbar",
		props: {
			animationHeight: {
				type: Object,
				default () {
					return {

					}
				}
			},
			// 导航栏高度，单位px，非rpx
			height: {
				type: [String, Number],
				default: ''
			},
			// 返回箭头的颜色
			backIconColor: {
				type: String,
				default: '#fff'
			},
			// 左边返回的图标
			backIconName: {
				type: String,
				default: 'arrow-left'
			},
			// 左边返回图标的大小，rpx
			backIconSize: {
				type: [String, Number],
				default: '40'
			},
			// 返回的文字提示
			backText: {
				type: String,
				default: ''
			},
			// 返回的文字的 样式
			backTextStyle: {
				type: Object,
				default () {
					return {
						color: '#606266'
					}
				}
			},
			// 导航栏标题
			title: {
				type: String,
				default: ''
			},
			// 标题的宽度，如果需要自定义右侧内容，且右侧内容很多时，可能需要减少这个宽度，单位rpx
			titleWidth: {
				type: [String, Number],
				default: '250'
			},
			// 标题的颜色
			titleColor: {
				type: String,
				default: '#fff'
			},
			// 标题的字体大小
			titleSize: {
				type: [String, Number],
				default: 30
			},
			isBack: {
				type: [Boolean, String],
				default: true
			},
			// 对象形式，因为用户可能定义一个纯色，或者线性渐变的颜色
			background: {
				type: Object,
				default () {
					return {

					}
				}
			},
			// 导航栏是否固定在顶部
			isFixed: {
				type: Boolean,
				default: true
			},
			// 是否显示导航栏的下边框
			borderBottom: {
				type: Boolean,
				default: true
			},
			zIndex: {
				type: [String, Number],
				default: '980'
			}
		},
		data() {
			return {
				menuButtonInfo: menuButtonInfo,
				statusBarHeight: systemInfo.statusBarHeight
			};
		},
		computed: {
			// 导航栏内部盒子的样式
			navbarInnerStyle() {
				let style = {};
				// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
				style.height = this.navbarHeight + 'px';
				// // 如果是各家小程序，导航栏内部的宽度需要减少右边胶囊的宽度
				// #ifdef MP
				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
				style.marginRight = rightButtonWidth + 'px';
				// #endif
				return style;
			},
			// 整个导航栏的样式
			navbarStyle() {
				let style = {};
				style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.navbar;
				// 合并用户传递的背景色对象
				Object.assign(style, this.background);
				return style;
			},
			// 导航中间的标题的样式
			titleStyle() {
				let style = {};
				// #ifndef MP
				style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
				style.right = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
				// #endif
				// #ifdef MP
				// 此处是为了让标题显示区域即使在小程序有右侧胶囊的情况下也能处于屏幕的中间，是通过绝对定位实现的
				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
				style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
				style.right = rightButtonWidth - (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + rightButtonWidth +
					'px';
				// #endif
				style.width = uni.upx2px(this.titleWidth) + 'px';
				return style;
			},
			// 转换字符数值为真正的数值
			navbarHeight() {
				return this.height ? this.height : 44;
		
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				return this.height ? this.height : height;
	
			}
		},
		created() {},
		methods: {
			goBack() {
				uni.navigateBack();
			}
		}
	};
</script>

<style scoped lang="scss">
	.u-navbar {
		width: 100%;
		// background:$theme-color-bg;
	}

	.u-navbar-fixed {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 999;
	}

	.u-status-bar {
		width: 100%;
	}

	.u-navbar-inner {
		// display: flex;
		// justify-content: space-between;
		position: relative;
		// padding-bottom: 24rpx;
		// box-sizing: content-box;
		// align-items: center;
	}

	.u-back-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		flex-grow: 0;
		padding: 14rpx 14rpx 14rpx 24rpx;
		height: 100%;
	}

	.u-back-text {
		padding-left: 4rpx;
		font-size: 30rpx;
	}

	.u-navbar-content-title {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		position: absolute;
		left: 0;
		right: 0;
		height: 60rpx;
		text-align: center;
		flex-shrink: 0;
	}

	.u-navbar-centent-slot {
		flex: 1;
	}

	.u-title {
		line-height: 1;
		font-size: 32rpx;
		flex: 1;
	}

	.u-navbar-right {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.u-slot-content {
		flex: 1;
		display: flex;
		// align-items: center;
		height: 100%;
	}

	.u-border-bottom:after {
		border-bottom-width: 0px;
	}
</style>