微信小程序 获取到了该手机得底部安全距离得高度 怎么全局给每个page赋值呢 实现全局配置手机底部安全距离?
当前思路:app.js里已经获取到高度,通过js声明wxss变量,但无效
回复
1个回答
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);
}
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容