这篇文章主要介绍了怎么精确计算微信小程序scrollview高度的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么精确计算微信小程序scrollview高度文章都会有所收获，下面我们一起来看看吧。
先给个示例图：
这是一个稍微复杂点的页面，最上面是两个tab标签，每个标签的页面是一个子组件。第二个子组件布局是上面一个标题，下面是scroll-view。
页面分三部分，tab，title，scroll-view。不要忘了每个部分间还有margin, 这里设置的是每个margin都是10px。
所以要计算scroll-view的高度可以得出下面公式：
为什么减两个10呢？上面说了10是margin的距离，tab与title有10px的margin，title与scroll-view也有10px的margin。
需要注意的是计算用的单位都是px，不是小程序的rpx。因为下面调用接口获取可用屏幕高度时得到的就是px。
上面的公式中的变量有：页面可用高度,title的高度，tab的高度。
这里需要计算的就是 页面可用高度 和title的高度，因为为了简单tab的高度是写死的50px, 当然不写死也没关系，在父组件中计算tab的高度传给子组件就好。
下面正式开始计算
这里主要是通过小程序封装的 API 来计算的。
wx.getSystemInfoSync()可以得到设备的各种信息，关于高度的参数有两个，一个是屏幕高度screenHeight，一个是可使用窗口高度windowHeight。注意计算的时候要用windowHeight，这样算出来的高度才是对的。screenHeight是手机的屏幕高度，包含了手机的状态栏和小程序标题栏。
有了可用屏幕高度，还需要元素的高度。计算元素高度小程序也提供了 API，参见WXML节点信息API。
具体用法看文档就好了，精简的使用步骤就是：
注意在组件component里使用的话，要用wx.createSelectorQuery().in(this)，将选择器的选取范围更改为自定义组件component内。（初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点。）
如果想同时测量多个节点的高度呢？
能计算单个当然也能同时计算多个。如下：
有几个节点就写几个query.select(‘.search’).boundingClientRect()， 然后调用query.exec()执行操作获取节点信息的数组。
注意：调用封装好的computeScrollViewHeight()的时机是在生命周期函数的ready()中，不能在created()，否则取不到数据。
参见Component构造器
计算完成后如何使用呢？
通过上面的免费云主机域名方法使用。
注意：一定要在变量后面加上单位px，不加的话会出错。关于“怎么精确计算微信小程序scrollview高度”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“怎么精确计算微信小程序scrollview高度”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注百云主机行业资讯频道。
这篇文章主要为大家展示了“HTML5新Form表单元素和属性有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“HTML5新Form表单元素和属性有哪些”这篇文章吧。 HTML5新表单元素 HTML 5 拥有若干涉…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
