小程序元素如何撑满页面剩余部分

本人接手一个小程序，他已经把静态页完成了，不过可惜的，页面的滚动机制他完全没有考虑，所以当我开发的时候，发现滚动功能完全无法使用。

　　

他开发的时候上方是三个块级元素，而下方的内容也是一个块级元素。

　　现在需要将下方的内容变为滚动区域，接着我瞬间想到的是两种办法

　　第一种，上方的三个块级元素全部浮动就好了，然后将整个页面课滚动，不过因为fixed浮动在移动端的恶劣兼容性，再加上上方样式耦合性太强，就直接pass了

 

　　第二种，使用scroll-view将下方内容包裹起来，并给scroll-view顶一个高度，那么问题来了，这个高度该怎么定义

 

　　很显然，由于机型的改变，屏幕大小的变化，这个是个动态高度，那这个高度是怎么定义呢

 

　　这里需要使用到小程序的几个api

　　　　wx:getSystemInfo获取系统信息，可以获取到当前机子的可使用窗口的高度

　　　　

　　　　wx.createSelectorQuery()：返回一个SelectorQuery对象实例，并使用boundingClientRect等方法选择需要查询的信息

　　　　

　　　　

 1 let query = wx.createSelectorQuery()　　
 2     wx.getSystemInfo({
 3       success: res => {
 4         query.selectAll('.box-top').boundingClientRect(rect => {
 5           let heightAll = 0;
 6           rect.map((currentValue, index, arr) => {
 7             heightAll = heightAll + currentValue.height
 8           })
 9           this.setData({
10             scrollheight: res.windowHeight - heightAll
11           })
12         }).exec();
13       }
14     })

　

<scroll-view scroll-y style="height:{{scrollheight}}px" class="recommend-container" bindscrolltolower="getmore">
<scroll-view>

 

　由此scrollheight就被计算出来了,此时scroll-view区域会撑满页面剩下所有高度

　　　　

 

　　

转载于:https://www.cnblogs.com/CreteWu/p/8532194.html