小程序适配底部安全距离

方案一

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 */
相关推荐
黑马源码库miui520866 分钟前
赤店商城系统点餐小程序多门店分销APP共享股东h5源码saas账号独立版全插件全开源
微信小程序·小程序·uni-app·微信公众平台
VX_CXsjNo11 小时前
免费送源码:Java+ssm+Android 基于Android系统的外卖APP的设计与实现 计算机毕业设计原创定制
android·java·css·spring boot·mysql·小程序·idea
V+zmm101341 小时前
基于微信小程序的汽车销售系统的设计与实现springboot+论文源码调试讲解
java·数据库·spring boot·微信小程序·小程序·毕业设计
小魁的C世界6 小时前
uniapp小程序开发,配置开启小程序右上角三点的分享功能
前端·小程序·uni-app
流星白龙7 小时前
【Linux】9.Linux第一个小程序进度条
linux·运维·小程序
说私域7 小时前
仪式感在会员体系建设中的重要性及AI智能名片2+1链动模式S2B2C商城小程序的应用研究
人工智能·小程序
你的眼睛會笑8 小时前
uniapp 小程序 五星评分精确到0.1
javascript·小程序·uni-app
是店小二呀11 小时前
【Linux】从零开始:编写你的第一个Linux进度条小程序
linux·运维·小程序
计算机-秋大田11 小时前
基于微信小程序的电影交流平台设计与实现(LW+源码+讲解)
java·微信小程序·小程序·课程设计