uni-app 自定义导航栏计算高度

2024年 6月 12日 1432点热度 0人点赞 0条评论

方法

    /**
     * 获取导航栏信息
     */
    getSysBar() {
        return new Promise((resolve, reject) => {
            uni.getSystemInfo({
                success: (e: any) => {
                    console.log(e, 'systemInfo')
                    // this.compareVersion(e.SDKVersion, '2.5.0')
                    let statusBar = 0
                    let customBar = 0

                    // #ifdef MP
                    statusBar = e.statusBarHeight
                    customBar = e.statusBarHeight + 45
                    if (e.platform === 'android') {
                        customBar = e.statusBarHeight + 50
                    }
                    // #endif

                    // #ifdef MP-WEIXIN
                    // statusBar = e.statusBarHeight
                    // @ts-ignore
                    const custom = wx.getMenuButtonBoundingClientRect()
                    statusBar = (custom.top - e.statusBarHeight) * 2 + custom.height + e.statusBarHeight;
                    if (e.platform === 'ios') {
                        statusBar += 4;
                    }
                    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
                    resolve({
                        statusBar,
                        customBar,
                    })
                },
                fail(result) {
                    reject(result);
                },
            })
        })
    }

组件使用

<template>
  <view :style="customStyle">

  </view>
</template>

<script lang="ts" setup>
import Utils from "@/utils/Utils";
import {computed, onMounted, ref} from "vue";
import Log from "@/utils/Log";

interface NavbarStyle {
  statusBar: number;
  customBar: number;
}

const logger = new Log("顶部tab 自定义bar")

let navbar = ref<NavbarStyle>({
  statusBar: 0,
  customBar: 0,
})
//
const customStyle = computed(() => {
  return {
    // #ifdef MP-WEIXIN
    height: `${navbar.value.customBar + navbar.value.statusBar}rpx`,
    // #endif

    // #ifdef APP
    height: `${navbar.value.customBar}rpx`
    // #endif
  }
})
onMounted(() => {
  // navbar.value = getWXStatusHeight();
  Utils.getSysBar().then((res: any) => {
    navbar.value = res;
    logger.info(navbar.value, 'navbar');
  });
})
</script>
<style lang="scss" scoped>

</style>