UniApp中Scroll-View怎么設置占滿下方剩余高度

這篇文章主要介紹“UniApp中Scroll-View怎么設置占滿下方剩余高度”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“UniApp中Scroll-View怎么設置占滿下方剩余高度”文章能幫助大家解決問題。

一、布局描述：

屏幕分為上下兩部分，上面部分高度固定，比如 400rpx（單位可以指定為其他的比如px、upx等，高度也可以自己設定），下面部分為 scroll-view 占滿剩余高度，兩者寬度都是占滿，效果圖如下：

二、實現方法如下

經驗證 APP 端和 H5端都可適用（易于看懂就直接上代碼了），不管底部是有 tabbar 還是沒有 tabbar 都兼容

<template>
    <view class="full-page">
        <view class="top"></view>
        <scroll-view class="scroll">
            <!-- scroll 承載的內容，超過長度可滑動，可自行填充 -->
        </scroll-view>
    </view>
</template>

<script>
    export default {
        onLoad() {
            // uni.hideTabBar();// 控制是否隱藏底部 tabbar
        }
    };
</script>

<style>
    .full-page {
        width: 100%;
        height: 100vh;
        background-color: red; // 全屏背景色:紅色
    }
 
    .top {
        width: 100%;
        height: 400rpx;
        background-color: green; // 上面部分背景色:綠色
    }
 
    .scroll {
        width: 100%;
        height: calc(100vh - 400rpx);
        background-color: blue; // 下面滾動區域部分背景色:藍色
    }
</style>

三、在整個摸索分析過程中，用到過下面一些方法

雖然最后沒有借此實現所需要的布局，但對于以后相關的開發還是有一些借鑒意義的：

1、獲取某個view的高度，以下面 view 為例

// 給 view 添加 id 比如“test_id”
<view id="test_id"></view>
 
// 然后在頁面的 onReady 生命周期中獲取該 id 對應的高度，單位 px
onReady() {
    console.log('onReady');
    uni.createSelectorQuery().select("#test_id").boundingClientRect(res => {
        let viewHeight = res.height + 'px';
    }).exec();
}

2、獲取整個屏幕的寬高（單位：px），連接設備 ADB 后可以用 CMD 窗口命令行獲取設備屏幕寬高信息：adb shell wm size，執行后的結果是：寬x高

uni.getSystemInfo({
    success: (res) => {
        let realScreenWidth = res.screenWidth * res.devicePixelRatio + 'px';//屏幕實際寬度
        let realScreenHeight = res.screenHeight * res.devicePixelRatio + 'px';//屏幕實際高度
    }
});

3、設置根布局為全屏顯示還可以用以下方法

.full-page {//缺點是子布局得是絕對布局
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.full-page {
    width: 100vw;
    height: 100vh;
}

<template>
    <view :>
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                realScreenWidth: '',
                realScreenHeight: '',
            };
        },
        onLoad() {
            uni.getSystemInfo({
                success: (res) => {
                    this.realScreenWidth = res.screenWidth * res.devicePixelRatio + 'px';
                    this.realScreenHeight = res.screenHeight * res.devicePixelRatio + 'px';
                }
            });
        }
    };
</script>

四、幾個小知識點

1、底部 tabbar 默認高度為 50px，可在 page.json 中修改

2、如果以 vw 為單位，則屏幕總寬度為固定的 100vw，假如屏幕實際寬度為 700px，則 vw 和 px 之間的比例為 7，也就是 1vw = 7px，以此類推

3、如果以 vh 為單位，則屏幕總高度為固定的 100vh，假如屏幕實際高度為 900px，則 vh 和 px 之間的比例為 9，也就是 1vh = 9px，以此類推

4、如果以 rpx 為單位，則屏幕總寬度為固定的 750rpx，假如屏幕實際寬度為 1500px，則 rpx 和 px 之間的比例為 2，也就是 1rpx = 2px，以此類推

5、uni.upx2px(400) 可以將 rpx 單位轉換為 px 單位長度，示例中的 400 單位是 rpx

6、scroll-view 的高度必須要設置，如果不設置，則滑動時只會帶動整個頁面一起滑動，如果設置過低則會導致底部留白，設置過高同樣也有問題

關于“UniApp中Scroll-View怎么設置占滿下方剩余高度”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。