苏州网站推广电话,网络营销方式主要有哪些,做网站是什么时候分页,国外采购平台有哪些在开发微信小程序中#xff0c;遇到 IOS 全面屏手机#xff0c;底部小黑条会遮挡页面按钮或内容#xff0c;因此需要做适配处理。 解决方案
通过 wx.getSystemInfo() 获取手机系统信息#xff0c;需要拿到#xff1a;screenHeight#xff08;屏幕高度#xff09;#…在开发微信小程序中遇到 IOS 全面屏手机底部小黑条会遮挡页面按钮或内容因此需要做适配处理。 解决方案
通过 wx.getSystemInfo() 获取手机系统信息需要拿到screenHeight屏幕高度safeArea安全区域对象pixelRatio像素比。然后通过计算得到底部安全区的高度动态设置底部元素的高度。
Page({data: {bottomHeight: 0,},onLoad() {this.safeAreaHandle()},async safeAreaHandle() {let {screenHeight,pixelRatio,safeArea: { bottom },} await wx.getSystemInfo()this.setData({bottomHeight: (screenHeight - bottom) * pixelRatio,})},
})screenHeight 是指屏幕高度单位为 px。 safeArea.bottom 是指安全区域右下角纵坐标单位为 px。 pixelRatio 设备像素比。 以 iPhone 6/7/8 为例pixelRatio 为 2即375px750rpx。
计算公式底部安全区高度 (屏幕高度 - 安全区域右下角纵坐标) * 像素比 由此计算可得到底部安全区的高度单位是 rpx。
动态设置底部安全区的高度
template namefooterview classpage-footer stylepadding-bottom:{{bottomHeight 20 rpx }}view classoptional-liview wx:for{{labels}} wx:keylabelCode bindtapclickLabel data-args{{item}} classopt-item{{item.labelName}}/view/view/view
/template参考文档https://developers.weixin.qq.com/miniprogram/dev/api/base/system/wx.getSystemInfo.html 欢迎访问天问博客
