我有一个键盘显示在页面底部,键盘上面有一个scroll-view,在键盘的样式里,有这样一行,可以实现在iphoneX上避开底部黑线:
margin-bottom: env(safe-area-inset-bottom);
上面那一行确认是可以实现在iPhoneX(底部需要避开的机型)和普通方屏手机的兼容效果的。
在JS里,我也需要知道底部安全区域是多少,进而动态调整键盘和scroll-view的高度,避免键盘遮挡住scroll-view。
问题:既然这一行代码在CSS里能获取,那在JS里怎样同步知道呢?或者CXX-JX可以传递参数吗?
说明:网络上大部的实现方法是:
1、在JS里获取机型看是不是iPhoneX,如果是,用高度再减34px。(这个我不太赞同,因为现在苹果这样的机型太多了,而且系统信息有些机型未必能获取)
2、在JS里获取机型看safeArea里的bottom值与screenHeight高度是否一样,如果不一样,就说明需要调整底部,如下:
- safeArea: {right: 375, bottom: 812, left: 0, top: 44, width: 375, …}
- screenHeight: 812
- screenWidth: 375
我在模拟器尝试了几个机型(有底部安全区域问题的),发现这两个值都是一样的。
/*键盘样式*/
.keyBoardPanel {
position: fixed;
bottom: 0;
width: 100%;
background-color:#FFF;
margin-bottom: env(safe-area-inset-bottom);
font-size: 28rpx;
min-height: 100rpx;
}
你用的方法2,在真机调试也是同样的结果吗?
console.log(wx.getSystemInfoSync())
var screenHeight = wx.getSystemInfoSync().screenHeight
var safeAreaHeight = wx.getSystemInfoSync().safeArea.height
var liuhai = wx.getSystemInfoSync().safeArea.top
var windowHeight = wx.getSystemInfoSync().windowHeight
var windowWidth = wx.getSystemInfoSync().windowWidth
var statusBarHeight = wx.getSystemInfoSync().statusBarHeight
//默认底部横线 = 0
var bottomLine = 0
//如果屏幕高度-顶部流海 大于 安全高度,说明底部有横线需要减
if ((screenHeight - liuhai)> safeAreaHeight)
{
bottomLine = screenHeight - liuhai - safeAreaHeight
}
console.log("screenHeight", screenHeight)
console.log("bottomLine", bottomLine)
console.log(wx.getSystemInfoSync())
//获取窗口高度存储到全局变量px转换为rpx
app.globalData.heightWindow_G = (windowHeight - bottomLine) * 750 / wx.getSystemInfoSync().windowWidth;
//状态栏高度80rpx,键盘最小100rpx/键盘显示时670rpx,
//显示键盘时,收发列表高度
that.data.scrollHeightKeyboard = app.globalData.heightWindow_G - statusBarHeight - 80 - 670
//隐藏键盘时,收发列表高度
that.data.scrollHeightFull = app.globalData.heightWindow_G - statusBarHeight - 80 - 100
//初次启动,收发列表为隐藏键盘高度
scrollHeight = that.data.scrollHeightFull