准确计算微信小程序scrollview高度，完整模型适应

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

小程序滚动视图组件非常凹陷，需要指定正常使用的高度。当布局复杂时，谁会给你高度？

一，布局分析，推导公式

首先给出一个示例图：

这是一个稍微复杂的页面，前两个选项卡，每个选项卡的页面都是一个子组件。第二个子组件布局是上面的一个，以下是滚动视图。

该页面分为三个部分：选项卡，标题和滚动视图。不要忘记每个部分之间有余量。这里的设置是每个边距是10px。

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

滚动视图的高度=可用页面的高度 - 选项卡的高度 - 标题高度 - 10 - 10复制代码

为什么减去两个10？上面说10是边距的距离，标签和标题的边距是10px，标题和滚动视图也有10px的边距。

应该注意，用于计算的单位都是px，而不是小程序的rpx。因为以下调用接口获得可用的屏幕高度，所以它获得px。

二，计算变量的高度2.1计算单个节点的高度

上面公式中的变量是：页面的可用高度，标题的高度和选项卡的高度。

这里需要计算的是页面的高度和标题的高度，因为简单标签的高度为50px，用于写死。当然，如果你不写死人也没关系。最好计算父组件中选项卡的高度并将其传递给子组件。

以下正式开始计算

//计算滚动视图的高度computeScrollViewHeight（）{let that=this let query=wx.createSelectorQuery（）。in（this）query.select（'。title'）。boundingClientRect（function（res）{//得到标题高度让titleHeight=res.height //滚动视图高度=屏幕高度 - 标签高度（50） - 10 - 10 - titleHeight //获取屏幕高度可用screenHeight=wx.getSystemInfoSync（）。windowHeight //计算scroll -view height让scrollHeight=screenHeight - titleHeight - 70 that.setData（{scrollHeight: scrollHeight}）}）。exec（）}，复制代码

这主要由小程序包的API计算。

wx.getSystemInfoSync（）可以获取有关设备的各种信息。关于高度有两个参数，一个是屏幕高度screenHeight，另一个是窗口高度windowHeight。请注意，在计算时应使用windowHeight，因此计算出的高度是正确的。 screenHeight是手机的屏幕高度，包括手机的状态栏和小程序标题栏。

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

具体用法着眼于文档，简化的步骤是：

让query=wx.createSelectorQuery（）。在（this）query.select（'。title'）。boundingClientRect（function（res）{//在这里做，res中有数据}} .exec（）copy Code

请注意，如果在组件组件中使用，请在（this）中使用wx.createSelectorQuery（）。将选择器的选择更改为自定义组件组件。 （最初，选择器仅选择页面范围的节点，而不从自定义组件中选择任何节点。）

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

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]。高度让titleHeight=res [1]。高度让windowHeight=wx.getSystemInfoSync（）。windowHeight让scrollHeight=windowHeight - searchHeight - titleHeight - 30 - 5 - 50 this .setData（{scrollHeight: scrollHeight}）}）}，复制代码

有几个节点写了一些query.select（'。search'）。boundingClientRect（），然后调用query.exec（）来执行一个操作来获取节点信息数组。

注意：调用包装的computeScrollViewHeight（）的时间是在生命周期函数的ready（）中，而不是在created（）中，否则没有数据可用。

请参阅组件构造函数

第三，在wxml

中使用计算结果 计算完成后如何使用？

复制代码

使用上述方法。

注意：务必在变量后添加单位px。如果您不添加它，您将收到错误。

以上是一种准确计算微信小程序scrollview高度的方法，从不担心滚动视图高度混乱！

HiShop小程序工具提供多种类型的商城/商店小程序制作，可视化编辑1秒，在线生成5个步骤。通过拖动和拼接模块布局小程序商城页面，你可以看到你得到的东西，你只需要艺术家来制作一个漂亮的商场。有关更多小程序商店，请参阅：小程序 store

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。