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

一、问题描述：

左图：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);
     
    
   

    

     

    
    

     
    
      // 查找底部按键的节点信息
     
    
   

    

     

    
    

     
    
      // 选择器的语法与jQuery语法相同
     
    
   

    

     

    
    

     

          query.select(
      '.layout-bottom').boundingClientRect();
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    
      // 执行上面所指定的请求，结果会按照顺序存放于一个数组中，在callback的第一个参数中返回
     
    
   

    

     

    
    

     

          query.exec(
      (res) => {
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
      
      // (3)取出底部按键的高度
     
    
   

    

     

    
    

     
      
      let layoutBottomHeight = res[
      0].height;
     
    
   

    

     

    
    

     
      
      // (4)然后屏幕高度-底部高度，剩余的即为顶部要设置的高度
     
    
   

    

     

    
    

     
      
      let screenHeight = 
      this.data.windowHeight - layoutBottomHeight;
     
    
   

    

     

    
    

     
      
      // (5)算出来之后存到data对象里面
     
    
   

    

     

    
    

     
      
      this.setData({
     
    
   

    

     

    
    

     
         
      screenHeight: screenHeight
     
    
   

    

     

    
    

     

             });
     
    
   

    

     

    
    

     

          });
     
    
   

    

     

    
    

     

        },
     
    
  

WXML 里面需要使用双大括号来将data部分的screenHeight的值绑定到height属性上面：（单位是px）

  

   

    

     

    
    

     

      <view class="layout-top">
     
    
   

    

     

    
    

     
    
      <!-- 通过css设置固定高度，无法填充大屏幕的多余空白
     
    
   

    

     

    
    

     

       <view class="screen">
     
    
   

    

     

    
    

     

       {{screenData}}
     
    
   

    

     

    
    

     

       </view> -->
     
    
   

    

     

    
    

     
    
      <!-- 改成设置为计算后的高度 -->
     
    
   

    

     

    
    

     
    
      <view class="screen" style="height: {{screenHeight}}px">
     
    
   

    

     

    
    

     

           {{screenData}}
     
    
   

    

     

    
    

     
    
      </view>
     
    
   

    

     

    
    

     

      </view>
     
    
  

三、执行结果：

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

右图：iphoneX的屏幕大小，由于设置了计算后的高度，不会出现多余空白