微信小程序scroll-view填满剩余可用高度

根据微信小程序scroll-view文档所述,scroll-view必须给定一个固定高度。那么如果我们想要让它自动填充剩余高度,该怎么办呢?

前言

在说出我的解决方案之前,先来看一下我的页面设计,以便于理解。

Page Design

如图所示,我将这个页面分成了三部分:最顶部的导航栏navbar,用于显示概要信息的header,以及本文的主角scroll-view。可见,scroll-view位于页面的最下方,如果我直接给它设定一个固定的高度,那么在不同尺寸的屏幕上,就可能会有高度过小而在下方留白,或者高度过大超出屏幕下边界的可能。那么,自动计算scroll-view的高度,看起来是一个可行的办法。

思路有了,接下来就开始挑趁手的工具吧!

需要的API

首先,在计算过程中,整个页面的高度是必须要有的。而小程序的wx.getSystemInfo API正好可以提供这样的功能。

其次,我们还得想办法拿到scroll-view上面各个组件的高度。小程序虽然没有DOM操作,但也提供WXML节点信息的API。

撸起袖子开始干

既然工具有了,那么,talk is cheap, I’ll show you the code!

当然,简洁起见,我只会写出相关的代码,其余的代码我将直接略掉。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
Page({
data: {
// 页面总高度将会放在这里
windowHeight: 0,
// navbar的高度
navbarHeight: 0,
// header的高度
headerHeight: 0,
// scroll-view的高度
scrollViewHeight: 0
},
onLoad: function(option) {

// 先取出页面高度 windowHeight
wx.getSystemInfo({
success: function(res) {
that.setData({
windowHeight: res.windowHeight
});
}
});

// 然后取出navbar和header的高度
// 根据文档,先创建一个SelectorQuery对象实例
let query = wx.createSelectorQuery().in(this);
// 然后逐个取出navbar和header的节点信息
// 选择器的语法与jQuery语法相同
query.select('#navbar').boundingClientRect();
query.select('#header').boundingClientRect();

// 执行上面所指定的请求,结果会按照顺序存放于一个数组中,在callback的第一个参数中返回
query.exec((res) => {
// 分别取出navbar和header的高度
let navbarHeight = res[0].height;
let headerHeight = res[1].height;

// 然后就是做个减法
let scrollViewHeight = this.data.windowHeight - navbarHeight - headerHeight;

// 算出来之后存到data对象里面
this.setData({
scrollViewHeight: scrollViewHeight
});
});
}
})

至于WXML里面,就还是使用双大括号来将data部分的scrollViewHeight的值绑定到height属性上面就是了。

需要注意的是,上面计算出来的值,单位是px而不是rpx

1
2
3
<scroll-view style="height: {{scrollViewHeight}}px" scroll-y="true">
<!-- scroll-view里面的内容 -->
</scroll-view>

这样,我们就得到了一个可以自动填满屏幕最下方剩余空间的scroll-view啦~