小程序适配底部安全距离

方案一

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 */
相关推荐
曲江涛2 小时前
微信小程序 webview 定位 并返回
微信小程序·小程序
27669582924 小时前
美团民宿 mtgsig 小程序 mtgsig1.2 分析
java·python·小程序·美团·mtgsig·mtgsig1.2·美团民宿
web_Hsir4 小时前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
fakaifa6 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
Angus-zoe6 小时前
微信小程序唤起app
微信小程序·小程序
不老刘7 小时前
微信小程序使用 Vant Weapp 组件库教程
微信小程序·小程序·vant
Mr.Liu68 小时前
小程序30-wxml语法-声明和绑定数据
前端·微信小程序·小程序
清风絮柳18 小时前
51. “闲转易”交易平台小程序(基于springboot&vue)
vue.js·spring boot·小程序·毕业设计·校园二手交易平台·二手交易小程序·闲转易交易系统
说私域18 小时前
基于开源AI大模型与S2B2C模式的线下服务型门店增长策略研究——以AI智能名片与小程序源码技术为核心
大数据·人工智能·小程序·开源
小程序照片合成20 小时前
uniapp微信小程序开发工具本地获取指定页面二维码
微信小程序·小程序·uniapp·二维码