uniapp 中微信小程序自定义导航 胶囊样式适配

app.vue中获取个高度

<script>
	export default {
		onLaunch() {
			// uni.getSystemInfo 获取设备信息 
			// uni.getMenuButtonBoundingClientRect 获取胶囊数据
			// uni.setStorage 异步本地存储
			uni.getSystemInfo({
				success: (res) => {
					const menuButton = uni.getMenuButtonBoundingClientRect() // 胶囊
					const navBarPadding = (menuButton.top - res.statusBarHeight) * 2
					const statusBarHeight = res.statusBarHeight //状态栏高度
					const navHeight = menuButton.height + navBarPadding // nav高度
					const headerHeight = navHeight + statusBarHeight // 总高度
					uni.setStorage({
						key: 'navData',
						data: {statusBarHeight,navHeight,headerHeight}
					})
					console.log(statusBarHeight, navHeight, headerHeight, ) // 20 40 60 iphone6/7/8
				}
			})
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>

封装导航组件

<template>
	<view>
		<view class="navBar">
			<view class="navBar_statusBar" :style="{height: statusBarHeight + 'px'}"></view>

			<view class="navBar_head" :style="{height: navHeight + 'px',lineHeight: navHeight + 'px'}">
				<view class="navBar_callback">
					<image v-if="callback" @click="callBack" src="../static/vertical/callBack.png"></image>
				</view>
				<p class="navBar_content">{{content}}</p>
			</view>
		</view>

		<view class="navBox" :style="{height: headerHeight + 'px'}"></view>
	</view>

</template>

<script>
	export default {
		props: {
			callback: {
				type: Boolean,
				default: true
			},
			content: {
				type: String,
				default: '首页'
			}
		},
		data() {
			return {
				statusBarHeight: '',
				navHeight: '',
				headerHeight: '',
			};
		},

		created() {
			let _this = this
			uni.getStorage({
				key: 'navData',
				success({ data }) {
					_this.statusBarHeight = data.statusBarHeight
					_this.navHeight = data.navHeight
					_this.headerHeight = data.headerHeight
				}
			});
		},
		methods: {
			callBack() {
				uni.navigateBack({

				})
			}
		}
	}
</script>

<style lang="scss">
	.navBar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: $green;
		width: 750rpx;

		.navBar_head {
			padding: 0 56rpx;
			display: flex;
			align-items: center;
			height: 53rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 53rpx;
			text-align: center;

			.navBar_callback {
				position: absolute;
				left: 56rx;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.navBar_content {
				width: 100%;
			}
		}
	}

	.navBox {
		width: 750rpx;
	}
</style>

您的点赞，就是对我的最大支持！！！