jiaju/component/pageHead.vue

<template>
    <view  :style="{'height':customBar}" class="head" >
        <view :style="{'height':customBar}" class="headCom" :class="brF?'br':''">
            <view class="imh" @click="navigateBackFun()"  v-if="navState">
                   <image class="imng"  src="../static/fh.png" mode=""></image> 
            </view>
       
          <view class="textInt">
              {{text}}
          </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                customBar:"170rpx"
            }
        },
        props:{
            text:String,
            brF:Boolean,
            navState:Boolean,
        },
        mounted(){
         
           uni.getSystemInfo({
               success: (e) => {
                 let statusBar = 0
                 let customBar = 0

                 
                 // #ifdef MP
                 statusBar = e.statusBarHeight
                 customBar = e.statusBarHeight + 45
                 if (e.platform === 'android') {
                   this.$store.commit('SET_SYSTEM_IOSANDROID', false)
                   customBar = e.statusBarHeight + 50
                 }
                 // #endif
                 
                 
                 // #ifdef MP-WEIXIN
                 statusBar = e.statusBarHeight
                 // @ts-ignore
                 const custom = wx.getMenuButtonBoundingClientRect()
                 customBar = custom.bottom + custom.top - e.statusBarHeight
                 // #endif
           
           
                 // #ifdef MP-ALIPAY
                 statusBar = e.statusBarHeight
                 customBar = e.statusBarHeight + e.titleBarHeight
                 // #endif
           
           
                 // #ifdef APP-PLUS
                 console.log('app-plus', e)
                 statusBar = e.statusBarHeight
                 customBar = e.statusBarHeight + 45
                 // #endif
           
           
                 // #ifdef H5
                 statusBar = 0
                 customBar = e.statusBarHeight + 45
                 // #endif
           
          
               this.customBar=customBar+100+"rpx"
                   uni.setStorageSync('customBar',customBar+100);
               }
           }) 
        },
        methods: {
        navigateBackFun(){
            // uni.navigateBack()
			uni.navigateBack({
				delta:1,
				success: (res) => {},fail: (err) => {
					uni.reLaunch({
						url:'/pages/index/index'
					})
				}
			})
        },
            
    
        }
    }
</script>

<style>
    
.head{
    width: 100%;
    
}
.headCom{
    position: fixed;
    width: 100%;
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    left: 0px;
    background-color: #F5F5F5;
    padding-bottom: 30rpx;
    box-sizing: border-box;
    top: 0rpx;
}
.imh{
     width: 30rpx;
     height: 30rpx;
     
     position: absolute;
     left: 10rpx;
     padding:  30rpx;
     padding-bottom: 0rpx;
}
.imng{
    width: 30rpx;
    height: 30rpx;
}
.br{
    background-color: #FFFFFF;
}
.textInt{
    font-size: 32rpx;
    font-weight: bold;
    color: #000000;
}
</style>