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

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

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

.full-page {//缺點(diǎn)是子布局得是絕對(duì)布局
    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>