小程序---获取view的高度

在我们做小程序的时候, 难免会碰到需要将界面分成俩部分来展示,如下图

这时我们就需要计算上部分view框的高度, 好让下部分填满整个界面

一种方法是把上部分view的高度固定,单位用rpx .

然后下部分高度就可以用微信提供的方法计算得出, 代码如下:

data: {
    scroll_height: 450, //初始滚屏的高度
  },

//页面加载
onLoad: function (options) {
    var that = this;
    wx.getSystemInfo({ //微信自身api
      success: function (res) {
        that.setData({
          scroll_height: res.windowHeight - 185 //此处是计算滚动屏的高度
        });
      }
    });

wxml代码为:

<scroll-view scroll-y style="height: {{scroll_height}}px;">
       .....
</scroll-view>

另外一种是我查阅相关文档 , 可以用 api来操作,并且动态获取:

//创建节点选择器
var item= wx.createSelectorQuery();
item.select('#tabs_height').boundingClientRect() //里面需要绑定 view组件的id
item.exec(function (res) { //res为绑定元素信息的数组
    let tabs_height = res.height; //这样可以动态获取高度
})

这里我使用的时候存在一个问题,就是 上面获取的高度好像是异步执行的 , 如果tabs_height 放在外面 赋值时,会有点问题, 获取不到高度值 , 如果有大神知道怎么解决, 还望请教一下.