uniapp - 导航栏设置

一、在微信小程序和H5、app的头部设置区分

<view class="u-main">
		<!-- 头部标题 -->
		<!-- #ifdef MP-WEIXIN -->
		<!-- 只会在微信小程序（MP-WEIXIN）平台下被编译和渲染 -->
		<view class="detail-head">
			<view class="head-main" :style="'padding-top:'+statusBarHeight+'px;height:'+navigationBarHeight+'px'">
				<u-icon @click="goBack" name="arrow-left" color="#fff" size="22"></u-icon>
				<text class="title">首页</text>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 || APP-PLUS || MP-ALIPAY -->
		<!-- 在 H5、APP（PLUS 表示可能是 uni-app 的 APP 端）和支付宝小程序（MP-ALIPAY）平台下被编译和渲染 -->
		<view class="detail-head">
			<view class="head-main h60">
				<u-icon @click="goBack" name="arrow-left" color="#fff" size="22"></u-icon>
				<text class="title">首页</text>
			</view>
		</view>
		<!-- #endif -->
</view>
<script>
	export default {
		components:{TextHome},
			data() {
				return {
					statusBarHeight:0,  // 状态栏
					navigationBarHeight:0, // 导航栏
                }
            }，
           mounted() {
				   // 获取状态栏高度
					this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
					// #ifndef H5 || APP-PLUS || MP-ALIPAY
					// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
					const custom = wx.getMenuButtonBoundingClientRect()
					// console.log(custom)
				 
					// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
					this.navigationBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2
					// console.log("导航栏高度："+this.navigationBarHeight)
				 
					// 总体高度 = 状态栏高度 + 导航栏高度
					this.navHeight = this.navigationBarHeight + this.statusBarHeight
				 
					// #endif
			},
        methods:{
                goBack(){
					uni.switchTab({
						// url: '/pages/person/person'
					});
   				},
         }
    }

</script>