微信小程序 获取到了该手机得底部安全距离得高度 怎么全局给每个page赋值呢 实现全局配置手机底部安全距离?

作者站长头像
站长
· 阅读数 6

微信小程序 获取到了该手机得底部安全距离得高度 怎么全局给每个page赋值呢 实现全局配置手机底部安全距离?当前思路:app.js里已经获取到高度,通过js声明wxss变量,但无效

回复
1个回答
avatar
test
2024-06-28

微信小程序本身不支持全局动态为 page 添加样式,如果要实现的话可以编写一个 app-container 组件作为每个页面的根组件,然后将安全区域的高度以 css 变量的形式添加给 app-container 组件即可,示例如下:

Component({
  options: {
    pureDataPattern: /^_/,
    addGlobalClass: true,
    styleIsolation: "shared"
  },
  data: {
    safeareaInsetBottom: 0
  },
  lifetimes: {
    attached() {
      // 此处省略获取底部安全区域高度的方法...
      this.setData({
        safeareaInsetBottom: xxx
      });
    }
  }
});
<view class="app-container" style="{{ '--safearea-inset-bottom': safeareaInsetBottom + 'px' }}">
  <slot></slot>
<view>
.app-container {
  padding-bottom: var(--safearea-inset-bottom);
}

另外,如果只需要兼容微信小程序并且不需要在 javascript 中使用安全区域计算的话,可以直接使用 env(safe-area-inset-bottom),而无需再使用 javascript 获取,示例如下:

page {
  padding-bottom: env(safe-area-inset-bottom);
}

也可以使用 calc()

page {
  padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容