uni-nav-bar设置height自适应高度

482 阅读1分钟

今天拿到ui设计的图之后,发现需要用到自定义navbar

给它设置height的时候,一开始用的iphone X的屏幕,像素单位用的rpx,发现切换到别的屏幕就不对了

然后还是用iphone X的屏幕,像素改成固定的88px,发现有一部分是可以的,但是还有一部分是需要设置64px

废话不多说,直接贴代码(代码是vue3.0+ts,请用vue2.0的小伙伴自行修改一下)

<template>
  <view class="home">
    <uni-nav-bar
      @clickLeft="back()"
      backgroundColor="rgba(0,0,0,0)"
      color="#fff"
      left-icon="back"
      border="false"
      :height="height + 'px'"
    >
    </uni-nav-bar>
  </view>
</template>
<script lang="ts" setup>
import { ref } from "vue";
let height = ref<number>(0);
uni.getSystemInfo({
  success: function (e) {
    let custom = uni.getMenuButtonBoundingClientRect();
    height.value = custom.bottom + custom.top - <number>(e.statusBarHeight) + 4
  },
});
console.log(height.value)
let back = () => {};
</script>
<style scoped>
@import "../../common/css/home.css";
</style>