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

发表于 2018-08-10 | 更新于 2018-08-15 | 分类于 项目记录 ， 小程序

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

前言

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

如图所示，我将这个页面分成了三部分：最顶部的导航栏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啦～