constant(safe-area-inset-bottom)和env(safe-area-inset-bottom)在uniapp中的使用方法解析

在微信小程序中，padding-bottom: constant(safe-area-inset-bottom); 和 padding-bottom: env(safe-area-inset-bottom); 这两个 CSS 属性用于处理 iPhone X 及更高版本设备的安全区域（safe area）。这些设备的底部有一个“Home Indicator”，为了避免内容被这个指示器遮挡，可以使用这些属性来动态调整底部的内边距。

详细说明

1. constant(safe-area-inset-bottom):

   • 这是旧的语法，用于 iOS 11.2 及更早版本。
   • 在 iOS 11.2 及更高版本中，推荐使用 env(safe-area-inset-bottom)。

2. env(safe-area-inset-bottom):

   • 这是新的语法，推荐使用。
   • 适用于 iOS 11.2 及更高版本。

使用示例

为了确保兼容性，通常会同时使用这两个属性。以下是一个示例，展示了如何在微信小程序中使用这些属性来处理安全区域。

示例代码

/* app.wxss */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding-bottom: constant(safe-area-inset-bottom); /* 旧的语法 */
  padding-bottom: env(safe-area-inset-bottom); /* 新的语法 */
}

.content {
  flex: 1;
  background-color: #f0f0f0;
}

.footer {
  background-color: #fff;
  padding: 10px;
  text-align: center;
  border-top: 1px solid #ccc;
}

解释

1. .container 类:

   • 使用 padding-bottom: constant(safe-area-inset-bottom); 和 padding-bottom: env(safe-area-inset-bottom); 来确保内容不会被底部的 Home Indicator 遮挡。
   • height: 100vh; 使容器占满整个视口高度。

2. .content 类:

   • 使用 flex: 1; 使内容区域占据剩余的空间。

3. .footer 类:

   • 这是一个示例底部栏，确保底部栏不会被 Home Indicator 遮挡。

完整示例

以下是一个完整的示例，展示了如何在微信小程序中使用这些属性。

app.json

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "Safe Area Example"
  }
}

app.wxss

/* app.wxss */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding-bottom: constant(safe-area-inset-bottom); /* 旧的语法 */
  padding-bottom: env(safe-area-inset-bottom); /* 新的语法 */
}

.content {
  flex: 1;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer {
  background-color: #fff;
  padding: 10px;
  text-align: center;
  border-top: 1px solid #ccc;
}

pages/index/index.js

// pages/index/index.js
Page({
  data: {
    message: 'Hello, Safe Area!'
  }
})

pages/index/index.json

{}

pages/index/index.wxml

<!-- pages/index/index.wxml -->
<view class="container">
  <view class="content">
    <text>{{message}}</text>
  </view>
  <view class="footer">
    <text>Footer Content</text>
  </view>
</view>

pages/index/index.wxss

/* pages/index/index.wxss */
/* 这里可以添加特定于该页面的样式 */

总结

通过在 CSS 中使用 padding-bottom: constant(safe-area-inset-bottom); 和 padding-bottom: env(safe-area-inset-bottom);，可以确保微信小程序的内容不会被 iPhone X 及更高版本设备的底部 Home Indicator 遮挡。这样可以提升用户体验，确保内容在不同设备上的显示效果一致。

如有开发的需求联系我