精确计算微信小程序scrollview的高度 适应整个模型

众所周知，可滚动组件在移动端非常重要，几乎每个页面都使用它。

但是，小程序的滚动视图组件比较坑，需要指定一个高度才能正常使用。布局复杂的时候谁来给你算身高？

坑来坑去，没办法，还得用.既然官方要求必须通过高度，那就想办法计算一下。

一、布局分析，推导公式

首先给出一个示例图：

这是一个稍微复杂一点的页面，顶部有两个标签，每个标签的页面都是一个子组件。第二个子组件布局是上面的标题和下面的滚动视图。

画另一张解剖图.

页面分为三个部分，标签，标题和滚动视图。别忘了每个部分之间都有一个空白。这里设定的是每个边距是10px。

因此，要计算滚动视图的高度，可以获得以下公式：

滚动视图高度=可用页面高度-标签高度-标题高度-10-10。为什么要从复制代码中减去两个10？它说10是边距的距离，制表符和标题有10px的边距，标题和滚动视图也有10px的边距。

需要注意的是，计算的单位是px，不是applet的rpx。因为调用接口获取可用屏幕高度时得到的是px。

二、计算变量的高度

2.1 计算单个节点高度

上式中的变量有：可用页面高度、标题高度和制表符高度。

这里需要计算的是页面的可用高度和标题的高度，因为为了简单起见，选项卡的高度是50px。当然，不写死也没关系。只需计算父组件中选项卡的高度，并将其传递给子组件。

让我们正式开始计算。

//计算滚动视图的高度-computescrollviewheight(){ let that=this let query=wx . createselector query()。在(此)查询中，选择('。标题')。boundingclient(函数(RES){//获取标题的高度让title Height=RES . Height//滚动视图的高度=屏幕高度-选项卡高度(50)-10-10-titleHeight //获取可用的屏幕高度让screen Height=wx . getsystem infosync()。windowheight//计算滚动视图的高度，让scrollheight=屏幕高度-title height-70 this。setdata({ scroll height 3360 scroll height })})。exec ()}，这里的复制代码主要是通过小程序打包的API来计算的。

Wx.getSystemInfoSync()可以获取设备的各种信息。关于高度有两个参数，一个是屏幕高度，另一个是可用的窗口高度。计算时注意使用windowHeight，这样计算出来的高度才是正确的。ScreenHeight是手机的屏幕高度，包括手机的状态栏和小程序标题栏。

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

只需查看文档了解具体用法，简化的使用步骤如下：

Let=wx。CreateSelectorQuery()。在(此)查询中。选择('。标题')。Boundingclientry(函数(RES){//这里做计算，RES有需要的数据})。exec()复制代码。注意在组件组件中使用，使用wx。createselector查询()。在(此)中，将选择器的选择范围更改为自定义组件。(最初，选择器仅选择页面范围内的节点，不选择任何自定义组件中的节点。)

如果要同时测量多个节点的高度怎么办？

2.2 计算多个节点高度

可以算单个，当然也可以同时算多个。如下所示：

computeScrollViewHeight() { let那=这个让查询=wx.createSelectorQuery().在（此)查询中，选择('。搜索')。boundingClientRect()。查询。选择(' .标题包装")。boundingClientRect()。查询。exec(RES={让搜索高度=RES[0]).高度字母titleHeight=res[1]。高度让windowHeight=wx。getsysteminfosync().窗口高度让滚动高度=窗口高度-搜索高度-标题高度-30-5-50这个。setdata({滚动高度：滚动高度})})}，复制代码有几个节点就写几个query.select(' .搜索')。boundingClientRect()，然后调用query.exec()执行操作获取节点信息的数组。

注意：调用封装好的计算滚动视图高度()的时机是在生命周期函数的就绪()中，不能在created()，否则取不到数据。

参见成分构造器

三、在 wxml 使用计算的结果

计算完成后如何使用呢？

滚动-视图滚动表示“有…的”样式='高度： { {滚动高度' px ' } } '/滚动-视图