UniApp中Scroll-View設(shè)置占滿下方剩余高度的方法記錄

更新時間：2023年04月03日 09:29:22 作者：七月七日晴52000

在使用uniapp開發(fā)項目過程中有時候會想讓一些組件占有屏幕剩余的高度,下面這篇文章主要給大家介紹了關(guān)于UniApp中Scroll-View設(shè)置占滿下方剩余高度的方法,需要的朋友可以參考下

一、布局描述：

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

二、實現(xiàn)方法如下

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

<template>
    <view class="full-page">
        <view class="top"></view>
        <scroll-view class="scroll">
            <!-- scroll 承載的內(nèi)容，超過長度可滑動，可自行填充 -->
        </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; // 下面滾動區(qū)域部分背景色:藍色
    }
</style>

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

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

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

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

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

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

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

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

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

<template>
    <view :style="{'width':realScreenWidth, 'height': realScreenHeight}">
    </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 單位轉(zhuǎn)換為 px 單位長度，示例中的 400 單位是 rpx

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

總結(jié)

到此這篇關(guān)于UniApp中Scroll-View設(shè)置占滿下方剩余高度的方法的文章就介紹到這了,更多相關(guān)UniApp Scroll-View占滿下方剩余高度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: