收藏
回答

微信小程序获取手机安全区域问题,WXSS的数据怎么传递到JS文件?

我有一个键盘显示在页面底部,键盘上面有一个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高度是否一样,如果不一样,就说明需要调整底部,如下:

  1. safeArea: {right375bottom812left0top44width375, …}
  2. screenHeight812
  3. screenWidth375

我在模拟器尝试了几个机型(有底部安全区域问题的),发现这两个值都是一样的。


/*键盘样式*/

.keyBoardPanel {

position: fixed;

bottom: 0;

width: 100%;

background-color:#FFF;

margin-bottom: env(safe-area-inset-bottom);

font-size: 28rpx;

min-height: 100rpx;

}


回答关注问题邀请回答
收藏

1 个回答

  • 加肥猫
    加肥猫
    2020-11-24

    你用的方法2,在真机调试也是同样的结果吗?

    2020-11-24
    有用 1
    回复 1
    • 张玉龙
      张玉龙
      2020-11-24
      感谢提醒,我真机测试了一下,发现问题了,下面附上我的代码,抱拳!
      2020-11-24
      1
      回复
登录 后发表内容
问题标签