众所周知,可以滑动的 而小程序的 坑归坑,没办法,还是得用……既然官方要求必须传高度,那就想办法计算吧。 一、布局分析,推导公式先给个示例图: 这是一个稍微复杂点的页面,最上面是两个 再画个解剖图吧…… 页面分三部分,tab,title,scroll-view。不要忘了每个部分间还有 所以要计算
scroll-view 的高度 = 页面可用高度 - tab高度 - title高度 - 10 - 10
复制代码
为什么减两个 需要注意的是计算用的单位都是 二、计算变量的高度2.1 计算单个节点高度上面的公式中的变量有:页面可用高度, 这里需要计算的就是 页面可用高度 和 下面正式开始计算 //计算 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 来计算的。
有了可用屏幕高度,还需要元素的高度。计算元素高度小程序也提供了 API,参见WXML节点信息API。 具体用法看文档就好了,精简的使用步骤就是: let query = wx.createSelectorQuery().in(this)
query.select('.title').boundingClientRect(function(res) {
//在这里做计算,res里有需要的数据
}).exec()
复制代码
注意在组件 如果想同时测量多个节点的高度呢? 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})
})
},
复制代码
有几个节点就写几个 注意:调用封装好的 参见Component构造器 三、在 wxml 使用计算的结果计算完成后如何使用呢? <scroll-view scroll-y style='height: {{scrollHeight + "px"}}'></<scroll-view> 复制代码
通过上面的方法使用。 注意:一定要在变量后面加上单位 以上就是精确计算微信小程序scrollview高度的方法,从此再也不担心 |
温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。
- 微信扫描二维码关注官方微信
- ▲长按图片识别二维码