专注连锁门店会员营销管理系统
线上+线下+进销存+收银+会员2020-09-27 作者:秩名
众所周知,可以滑动的 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 。
上面的公式中的变量有:页面可用高度, 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内。(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点。)
如果想同时测量多个节点的高度呢?
能计算单个当然也能同时计算多个。如下:
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构造器
计算完成后如何使用呢?
<scroll-view scroll-y style='height: {{scrollHeight + "px"}}'></<scroll-view> 复制代码
通过上面的方法使用。
注意:一定要在变量后面加上单位 px ,不加的话会出错。
以上就是精确计算微信小程序scrollview高度的方法,从此再也不担心 scroll-view 高度错乱了!
线上+线下+进销存+收银+会员门店零售管理好帮手
门店能实现快速收银,提升门店经营效率。
系统自带进销存管理,更好管理库存销售。
配备收银硬件一站式整体服务。
收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款
获取报价推荐文章
最新消息总结,开发一个小程序我们可以选择的第三方框架有5种,大家比较熟悉的有美团小程序框架mpvue,还有组件化框架等...
最近在调研小程序的分享能力,本篇文档主要是调研小程序关于分享方面的玩法,目的是学习小程序在项目应用以及玩法链上...
许多人在使用小程序,会有一个很麻烦的事情,就是使用过小程序之后,会不断的发送自己的定位消息,那么这个小程序的...
一款小程序,很多时候需要调用内置的照相机,实现拍照并图片上传,那么要如何实现呢?...
长沙小程序制作公司选择指南 在数字化浪潮中,小程序已成为企业拓展业务、提升用户体验的重要工具。对于长沙的企业和...
长沙小程序价格百科 在长沙,小程序开发价格因多种因素而有所不同。接下来,我们将从功能需求、开发模式、设计要求这...
长沙小程序开发制作公司全知道 在数字化浪潮中,小程序已成为企业拓展业务、提升用户体验的关键工具。长沙作为互联网...
1. 长沙小程序制作公司哪家好价格便宜 在长沙,想找价格便宜且靠谱的小程序制作公司,需先了解小程序开发模式。模板类...
长沙小程序制作开发百科 在数字化浪潮中,长沙的企业与商家纷纷将目光投向小程序制作开发,期望借此拓展业务、提升用...
长沙微信小程序定制制作公司相关介绍 在数字化浪潮中,微信小程序已成为企业拓展业务、提升用户体验的重要工具。长沙...