微信小程序渲染完获取scroll-view的自适应高度

在写微信小程序页面时，常常会遇到上下两个view的布局，上面的view的高度未知，要等到渲染完异步数据才能确定，下面的view里面要放一个scroll-view，要求scroll-view自适应页面剩余高度，根据官方文档，使用竖向滚动时，需要给scroll-view一个固定高度，那么这个scroll-view的自适应高度要怎么获取到呢？

scroll-view

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

首先，页面wxml中给 scroll-view 通过样式设置其高度为scrollHeight，单位为px：

<view class="container">
    <view class="top-box">
        <!--异步数据渲染-->
        {{ data }}
    </view>
    <view class="info-box">
        <scroll-view scroll-y="true" style="height: {{scrollHeight}}px;">
            {{ data2 }}
        </scroll-view>
    </view>
</view>

 然后在wxss样式文件这样写：

.container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.info-box{
  flex: 1;
  height: 1px;  /* flex：1 高度依然不会自适应加一个默认高度1px就可以自适应了 */
}

用flex:1可以使info-box自动撑满页面剩余高度，接下来只要获取这个info-box的高度然后赋值给scrollHeight就可以了。

接着在js文件里data定义scrollHeight，给一个默认高度：

data: {
    scrollHeight: 20
}

最后在js里定义一个函数 getScrollHeight() 来获取高度，并且在页面渲染完的生命周期函数onReady中进行调用，这里要注意，获取元素高度时，如果不加定时器，获取的元素的高度还是没渲染完异步数据前的高度，所以需要加定时器：

//获取scroll-view高度
getScrollHeight(){
  //如果不加定时器，获取的元素的高度还是没渲染完异步数据前的高度
  setTimeout(()=>{
    let query = wx.createSelectorQuery();
    query.select('.info-box').boundingClientRect(rect=>{
      let height = rect.height;  //单位：px
      console.log("rect", rect, height);
      this.setData({
        scrollHeight: height
      })
    }).exec();
  }, 300)
},

/**
 * 生命周期函数--监听页面初次渲染完成
 */
onReady: function () {
  //获取scroll-view高度
  this.getScrollHeight();
}

这样就可以解决scroll-view自适应页面剩余高度的问题了。