weapp-online/components/custom-nav.vue

<template>
	<view>
		<view class="nav" :style="{ height: navBarHeight + 'px' }">
			<view class="nav-main" :style="{ background: bgColor ? bgColor : '' }">
				<view
					class="capsule-box"
					:style="{ height: menuHeight + 'px', 'min-height': menuHeight + 'px', 'line-height': menuHeight + 'px', bottom: menuBotton + 'px', left: menuRight + 'px' }"
				>
					<slot></slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let app = getApp();
export default {
	props: ['bgColor'],
	data() {
		return {
			navBarHeight: app.globalData.navBarHeight, //导航栏高度
			menuRight: app.globalData.menuRight, // 胶囊距右方间距（方保持左、右间距一致）
			menuBotton: app.globalData.menuBotton,
			menuHeight: app.globalData.menuHeight
		};
	},
	methods: {}
};
</script>

<style lang="scss">
.nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
}
.nav-main {
	width: 100%;
	height: 100%;
	// height:44rpx;
	position: relative;
}
.nav .capsule-box {
	position: absolute;
	box-sizing: border-box;
	width: 100%;
}
</style>