众所周知，，，可以滑动的 scroll 组件在移动端很是的主要，，，险些每个页面都要用到。。。。

而小程序的 scroll-view 组件就较量坑了，，，非得指定一个高度才华正常使用。。。。结构重大的时间谁还给你算高度啊。。。。。。。。。。。。

一、结构剖析，，，推导公式

先给个示例图：

这是一个稍微重大点的页面，，，最上面是两个 tab 标签，，，每个标签的页面是一个子组件。。。。第二个子组件结构是上面一个问题，，，下面是 scroll-view 。。。。

页面分三部分，，，tab，，，title，，，scroll-view。。。。不要忘了每个部分间尚有 margin , 这里设置的是每个 margin 都是 10px 。。。。

以是要盘算 scroll-view 的高度可以得出下面 公式 ：

scroll-view 的高度 = 页面可用高度 - tab高度 - title高度 - 10 - 10
复制代码

为什么减两个 10 呢？？？上面说了 10 是 margin 的距离，，， tab 与 title 有 10px 的 margin，，， title 与 scroll-view 也有 10px 的 margin 。。。。

需要注重的是盘算用的单位都是 px ，，，不是小程序的 rpx 。。。。由于下面挪用接口获取可用屏幕高度时获得的就是 px 。。。。

二、盘算变量的高度

2.1 盘算单个节点高度

上面的公式中的变量有：页面可用高度, title 的高度，，， tab 的高度。。。。

这里需要盘算的就是 页面可用高度 和 title 的高度，，，由于为了简朴 tab 的高度是写死的 50px , 虽然不写死也没关系，，，在父组件中盘算 tab 的高度传给子组件就好。。。。

下面正式最先盘算

//盘算 scroll-view 的高度
computeScrollViewHeight() {
  let that = this
  let query = wx.createSelectorQuery().in(this)
  query.select('.title').boundingClientRect(function(res) {
    //获得问题的高度
    let titleHeight = res.height
    //scroll-view的高度 = 屏幕高度- tab高(50) - 10 - 10 - titleHeight
    //获取屏幕可用高度
    let screenHeight = wx.getSystemInfoSync().windowHeight
    //盘算 scroll-view 的高度
    let scrollHeight = screenHeight - titleHeight - 70
    that.setData({
      scrollHeight: scrollHeight
    })
  }).exec()
},
复制代码

这里主要是通过小程序封装的 API 来盘算的。。。。

wx.getSystemInfoSync() 可以获得装备的种种信息，，，关于高度的参数有两个，，，一个是屏幕高度 screenHeight ，，，一个是可使用窗口高度 windowHeight 。。。。注重盘算的时间要用 windowHeight ，，，这样算出来的高度才是对的。。。。 screenHeight 是手机的屏幕高度，，，包括了手机的状态栏和小程序问题栏。。。。

有了可用屏幕高度，，，还需要元素的高度。。。。盘算元素高度小程序也提供了 API，，，拜见WXML节点信息API。。。。

详细用法看文档就好了，，，精简的使用方法就是：

let query = wx.createSelectorQuery().in(this)
query.select('.title').boundingClientRect(function(res) {
    //在这里做盘算，，，res里有需要的数据
}).exec()
复制代码

注重在组件 component 里使用的话，，，要用 wx.createSelectorQuery().in(this) ，，，将选择器的选取规模更改为自界说组件component内。。。。（初始时，，，选择器仅选取页面规模的节点，，，不会选取任何自界说组件中的节点。。。。）

若是想同时丈量多个节点的高度呢？？？

2.2 盘算多个节点高度

能盘算单个虽然也能同时盘算多个。。。。如下：

computeScrollViewHeight() {
  let that = this
  let query = wx.createSelectorQuery().in(this)
  query.select('.search').boundingClientRect()
  query.select('.title-wrapper').boundingClientRect()
  query.exec(res => {
    let searchHeight = res[0].height
    let titleHeight = res[1].height
    let windowHeight = wx.getSystemInfoSync().windowHeight
    let scrollHeight = windowHeight - searchHeight - titleHeight - 30 - 5 - 50 
    this.setData({ scrollHeight: scrollHeight})
  })
},
复制代码

有几个节点就写几个 query.select('.search').boundingClientRect() ，，， 然后挪用 query.exec() 执行操作获取节点信息的数组。。。。

注重：挪用封装好的 computeScrollViewHeight() 的时机是在生命周期函数的 ready() 中，，，不可在 created() ，，，否则取不到数据。。。。

拜见Component结构器

三、在 wxml 使用盘算的效果

盘算完成后怎样使用呢？？？

<scroll-view scroll-y style='height: {{scrollHeight + "px"}}'></<scroll-view>
复制代码

通过上面的要领使用。。。。

注重：一定要在变量后面加上单位 px ，，，不加的话会蜕化。。。。

以上就是准确盘算微信小程序scrollview高度的要领，，，以后再也不担心 scroll-view 高度庞杂了！