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

根據微信小程序 scroll-view 文檔所述，scroll-view必須給定一個固定高度。那么如果我們想要讓它自動填充剩余高度，該怎么辦呢？

 

前言

在說出我的解決方案之前，先來看一下我的頁面設計，以便於理解。

我將這個頁面分成了三部分：最頂部的導航欄navbar，用於顯示概要信息的header，以及本文的主角scroll-view。可見，scroll-view位於頁面的最下方，如果我直接給它設定一個固定的高度，那么在不同尺寸的屏幕上，就可能會有高度過小而在下方留白，或者高度過大超出屏幕下邊界的可能。那么，自動計算scroll-view的高度，看起來是一個可行的辦法。

思路有了，接下來就開始挑趁手的工具吧！

需要的 API

首先，在計算過程中，整個頁面的高度是必須要有的。而小程序的 wx.getSystemInfo API 正好可以提供這樣的功能。

其次，我們還得想辦法拿到scroll-view上面各個組件的高度。小程序雖然沒有 DOM 操作，但也提供 WXML 節點信息的 API。

簡潔起見，我只會寫出相關的代碼，其余的代碼我將直接略掉。

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。

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

 

 

 

轉:https://blog.csdn.net/QFire/article/details/84558515