记录一下uni-app 打包小步调设置页面的安全距离

张裕  金牌会员 | 2024-11-3 09:00:15 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题

主题 670|帖子 670|积分 2010

有很多种办理方式



  • 第一种利用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)">
    7.                 </view>
    8.         </view>
    9. </template>
    10. <script setup>
    11.     const { statusBarHeight, safeAreaInsets } = uni.getSystemInfoSync();
    12.     console.log('statusBarHeight', statusBarHeight)
    13.     console.log('safeAreaInsets', safeAreaInsets)
    14. </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企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

张裕

金牌会员
这个人很懒什么都没写!
快速回复 返回顶部 返回列表