解决屏幕大小不一导致页面下方出现多余空白的问题

一、问题描述：

左图：iphone5的屏幕大小，页面高度正常显示

右图：iphoneX的屏幕大小，由于设置了固定高度，导致在大屏幕下出现多余空白

 

二、解决方案：底部(按键)保持固定高度，顶部(输入结果部分)根据屏幕高度计算剩余高度

Page({
  data:{
    .........
    windowHeight: 0,
    screenHeight: 0,
    layoutBottomHeight: 0
  },
  onLoad:function(options){

    // (1)先取出页面高度 windowHeight
    var _this = this;
    wx.getSystemInfo({
      success: function(res) {
        _this.setData({
          windowHeight:res.windowHeight
        })
      }
    });

    // (2)根据文档，先创建一个SelectorQuery对象实例
    let query = wx.createSelectorQuery().in(this);
    // 查找底部按键的节点信息
    // 选择器的语法与jQ