index.vue 866 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <template>
  2. <view class="containerx">
  3. <view :style="{height: statusBarHeight + 'px'}"></view>
  4. <!-- <view :style="{height: navBarHeight + 'px'}"></view> -->
  5. <view class="page-content">
  6. 主页
  7. </view>
  8. </view>
  9. </template>
  10. <script setup>
  11. import { ref } from 'vue'
  12. import { onReady, onLoad } from '@dcloudio/uni-app'
  13. // 屏幕状态栏高度
  14. const statusBarHeight = ref(0)
  15. // 顶部导航栏高度
  16. const navBarHeight = ref(0)
  17. onReady(() => {
  18. uni.getSystemInfo({
  19. success(e) {
  20. statusBarHeight.value = e.statusBarHeight;
  21. let custom = uni.getMenuButtonBoundingClientRect();
  22. navBarHeight.value = custom.height + (custom.top - e.statusBarHeight) * 2;
  23. }
  24. })
  25. })
  26. onLoad(() => {
  27. console.log('onLoad')
  28. })
  29. </script>
  30. <style lang="scss" scoped>
  31. .containerx {
  32. height: 100vh;
  33. width: 100vw;
  34. background-color: #f7f7f7;
  35. }
  36. </style>