小程序适配底部安全距离

方案一

TypeScript 复制代码
<view style="padding-bottom: {{safeBottom + 10}}px;"></view>
TypeScript 复制代码
onLoad(options) {
    const { screenHeight, safeArea, windowHeight } = wx.getWindowInfo()
    let safeBottom = windowHeight
    if (safeArea?.bottom) {
      safeBottom = safeArea.bottom
    }
    safeBottom = screenHeight - safeBottom
    this.setData({
      safeBottom
    })
}

方案二(推荐)

TypeScript 复制代码
padding-bottom: constant(safe-area-inset-bottom); /* 兼容iOS < 11.2 */  
padding-bottom: env(safe-area-inset-bottom); /* 兼容iOS > 11.2 */
相关推荐
学点程序7 小时前
AI辅助开发小程序的实践分享
小程序
vx_dmxq21118 小时前
【PHP考研互助系统】(免费领源码+演示录像)|可做计算机毕设Java、Python、PHP、小程序APP、C#、爬虫大数据、单片机、文案
java·spring boot·mysql·考研·微信小程序·小程序·php
蹦极的考拉19 小时前
夜间无法登录:ThinkPHP api接口 23:00 准时罢工的排查全纪录
小程序·thinkphp·api接口·无法登陆
vx_vxbs6620 小时前
【SSM电影网站】(免费领源码+演示录像)|可做计算机毕设Java、Python、PHP、小程序APP、C#、爬虫大数据、单片机、文案
java·spring boot·python·mysql·小程序·php·idea
G佳伟1 天前
‌微信小程序Webview转发页面空白问题解决方案‌
微信小程序·小程序
vx_vxbs661 天前
【SSM电动车智能充电服务平台】(免费领源码+演示录像)|可做计算机毕设Java、Python、PHP、小程序APP、C#、爬虫大数据、单片机、文案
java·spring boot·mysql·spring cloud·小程序·php·idea
低代码布道师1 天前
医疗小程序12出诊列表
低代码·小程序
Coder-coco1 天前
游戏助手|游戏攻略|基于SprinBoot+vue的游戏攻略系统小程序(源码+数据库+文档)
java·vue.js·spring boot·游戏·小程序·论文·游戏助手
小小王app小程序开发2 天前
盲盒小程序一番赏衍生玩法:魔王赏、非酋赏、狂欢赏差异化分析
小程序
2501_915106322 天前
iOS App 测试工具全景分析,构建从开发调试到线上监控的多阶段工具链体系
android·测试工具·ios·小程序·uni-app·iphone·webview