uniapp获取底部安全距离以及状态栏高度等
uni-app 2022-12-13 15:45:57

 

获取上安全距离: env(safe-area-inset-top)

获取左安全距离:env(safe-area-inset-left)

获取右安全距离:env(safe-area-inset-right)

获取下安全距离:env(safe-area-inset-bottom)

 

可以在固定底部的盒子加下内下边距 padding-bottom: env(safe-area-inset-bottom) 避免元素被遮挡

CSS Code复制内容到剪贴板
  1. /* #ifdef H5 */  
  2.         height: calc(100vh - (50px + env(safe-area-inset-bottombottom)));  
  3.         /* #endif */  
  4.         /* #ifndef H5 */  
  5.         /* 小程序会造成滚动条,多加1像素 */  
  6.         height: calc(100vh - (41px + env(safe-area-inset-bottombottom)));  
  7.         /* #endif */  

 

 

自定义导航栏需要注意的是:顶部存在状态栏,也就是显示信号、时间等信息的状态栏;

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.     <view class="container">  
  3.         <!-- 自定义顶部导航 -->  
  4.         <uni-nav-bar left-icon="left" backgroundColor="#FFFFFF" title="顶部导航" @clickLeft="backPage"></uni-nav-bar>  
  5.           
  6.         <!-- 页面内容 -->  
  7.         <view class="page-content">  
  8.             <!-- ---------- -->  
  9.         </view>  
  10.     </view>  
  11. </template>  
  12.   
  13. <style>  
  14.   
  15. .container {  
  16.     background-color: #ffffff;  
  17.     height: 100%;  
  18.     padding-top: var(--status-bar-height);  
  19.     display: flex;  
  20.     flex-direction: column;  
  21.     position: absolute;  
  22.     top: 0;  
  23.     bottom: 0;  
  24.     left: 0;  
  25.     right: 0;  
  26. }  
  27.   
  28. </style>  

 

 

参考:https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#css-%E5%8F%98%E9%87%8F

 

 

本文来自于:http://www.yoyo88.cn/study/uniapp/649.html

Powered by yoyo苏ICP备15045725号