小程序动态修改页面的高度

背景

一个 tab 页面，每个页面的背景色是 #f4f4f4 数据都是动态的，数据会越来越多。当数据没有撑满屏幕的高度时，为了保证最外层的view的背景色是 #f4f4f4 。高度必须是屏幕高度的100%也就是100vh。如果数据撑开屏幕的高度的话，最外层view给高度可以是 auto 或者是 100% 。

实现

let that = this;
wx.getSystemInfo({
  success: function (res) {
    // 获取可用高度px
    let windowHeight = res.windowHeight;
    let tabsHeight, grounpHeight;
    console.log(res.windowHeight);
    let query = wx.createSelectorQuery();
    query.select('#order-grounp').boundingClientRect();
    query.exec(function (res) {
      // 获取order-grounp的高并赋值
      grounpHeight = res[0].height;
      let query1 = wx.createSelectorQuery();
      query1.select('#tabs').boundingClientRect();
      query1.exec(function (res) {
        // 获取tabs的高并赋值
        tabsHeight = res[0].height;
        console.log('tabsHeight' + tabsHeight);
        console.log('grounpHeight' + grounpHeight);
        if ((windowHeight - tabsHeight) > grounpHeight){
          that.setData({
            _height: '100vh'
          })
        }else{
          that.setData({
            _height: '100%'
          })
        }
      });
    });
  }
})