bigdata_WX/components/nav-top-bar/nav-top-bar.vue

<template>
	<view>
		<!-- 固定在顶部：状态栏占位 + 页面自己的头部内容（插槽），滚动时内容从其下方穿过 -->
		<view class="nav-top-bar" :style="{ background: background }">
			<uni-status-bar />
			<view class="nav-top-bar__content">
				<slot />
			</view>
		</view>
		<!-- 占位：高度自动等于固定栏总高（状态栏 + 插槽内容），保证滚动前布局不变 -->
		<view class="nav-top-bar__placeholder" :style="{ height: placeholderHeight + 'px' }"></view>
	</view>
</template>

<script>
	import uniStatusBar from '../uni-status-bar/uni-status-bar.vue';

	export default {
		name: 'nav-top-bar',
		components: {
			uniStatusBar
		},
		props: {
			// 固定栏背景（需不透明才能盖住滚上去的内容），可传颜色或渐变
			background: {
				type: String,
				default: '#FFFFFF'
			}
		},
		data() {
			return {
				placeholderHeight: 0
			};
		},
		mounted() {
			this.$nextTick(this.measure);
		},
		methods: {
			// 插槽内容高度变化后（如异步数据渲染出头部）可调用 this.$refs.xxx.measure()
			measure() {
				uni.createSelectorQuery().in(this).select('.nav-top-bar').boundingClientRect(rect => {
					if (rect && rect.height) {
						this.placeholderHeight = rect.height;
					}
				}).exec();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.nav-top-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.nav-top-bar__content {
		width: 100%;
	}
</style>