IT评测·应用市场-qidao123.com

标题: 记录一下uni-app 打包小步调设置页面的安全距离 [打印本页]

---

作者: 张裕    时间: 2024-11-3 09:00
标题: 记录一下uni-app 打包小步调设置页面的安全距离
有很多种办理方式

• 第一种利用js方式办理
  
  
  
  • 这种方式一样寻常用自界说顶部导航栏和底部tabbar方式
    
  1. 案例代码
  2. <template>
  3.         <view class="content" :style="{height: 'calc(100% - '+(safeAreaInsets.bottom + statusBarHeight)+'px)', paddingTop: statusBarHeight+'px'}">
  4.                 <view :style="{height: 40 + 'px'}"> 状态栏下的文字 </view>
  5.                 定义NavHeight 高度一般是固定的50px
  6.                 <view class="content" style="height: calc(100% - 50px)">
  8.                 </view>
  9.         </view>
  10. </template>
  12. <script setup>
  13.     const { statusBarHeight, safeAreaInsets } = uni.getSystemInfoSync();
  14.     console.log('statusBarHeight', statusBarHeight)
  15.     console.log('safeAreaInsets', safeAreaInsets)
  17. </script>

  复制代码
  
  
• 利用css 方式办理 (这种还是比较常用的 在一个列表页面或者 底部定位按钮的时间不设置安全区域就会影响系统底部操作)
  
  
  
  • 利用苹果官方推出适配方案css函数env()、constant()来适配
    
  • env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预界说变量：
    safe-area-inset-left：安全区域距离左边边界的距离
    safe-area-inset-right：安全区域距离右边边界的距离
    safe-area-inset-top：安全区域距离顶部边界的距离
    safe-area-inset-bottom ：安全距离底部边界的距离
    
  • env()和constant()函数有个必要的利用条件，当网页设置viewport-fit=cover的时间才生效，根据微信小步调的表现和我在实际真机测试时这两个函数生效，推测小步调里的viewport-fit默认是cover。
    
  • 我们需要将viewport设置为cover，env和constant才能生效。设置代码如下：
    
  1. <meta name="viewport" content="width=device-width...... viewport-fit=cover">

  复制代码
    
  
  
  
  • 同时设置env和constant代码，同样env()和constant()需要同时存在，而且序次不能换。
    
  1. /* 可以通过增加padding-bottom来适配 */  
  2. padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/  
  3. padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/

  复制代码
  
  

利用案例

1. <template>
2.         <view class="home">       
3.               <button class="btn">按钮</button>
4.         </view>
5. </template>
6. <style>
7.     .btn {
8.         position: fixed;
9.         right: 0;
10.         left: 0;
11.         bottom: env(safe-area-inset-bottom);
12.     }
13. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)

Powered by Discuz! X3.4