<template>
	<view class="container">
		<view :style="{height: navigationBarAndStatusBarHeight+'px'}" class="A">
			<view :style="{paddingTop:(statusBarHeight+10)+'px',width: '100%',backgroundColor:'#ff0a43'}">
				<view class="">数据构建区域</view>
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="">
			微信自定义导航栏，位于胶囊下方区域，内容展示区
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//获取各种高度信息---tcy
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				navigationBarHeight: 0,
				// 胶囊按钮高度
				menuButtonHeight: 0,
				// 导航栏和状态栏高度
				navigationBarAndStatusBarHeight: 0,
			}
		},
		methods: {
			back() {
				//返回上一级，关闭当前页面
				wx.navigateBack({
					delta: 1
				})
			},
			//获取自定义导航栏高度-用于信息页面--tcy
			getNavigationBarHeight() {
				const {
					statusBarHeight,
					platform
				} = wx.getSystemInfoSync()
				const {
					top,
					height
				} = wx.getMenuButtonBoundingClientRect()
				// 状态栏高度
				this.statusBarHeight = statusBarHeight
				// 胶囊按钮高度 一般是32 如果获取不到就使用32
				this.menuButtonHeight = height ? height : 32
				// 判断胶囊按钮信息是否成功获取
				if (top && top !== 0 && height && height !== 0) {
					this.navigationBarHeight = (top - statusBarHeight) * 2 + height
					// 导航栏高度
				} else {
					this.navigationBarHeight = platform === 'android' ? 48 : 40

				}
				this.navigationBarAndStatusBarHeight = this.statusBarHeight + this.navigationBarHeight
				console.log("this.", this.navigationBarAndStatusBarHeight, this.statusBarHeight, this.navigationBarHeight,
					this.menuButtonHeight);
			},

		},

		onShow() {
			this.getNavigationBarHeight();
		},
	}
</script>

<style scoped>
	.A {
		width: 100%;
		display: flex;
		flex-direction: row;
	}
</style>