uni-app 上中下布局

<template>
    <!-- 页面容器 -->
    <view class="page-wraper">
        <!-- 页面头部 -->
        <view class="page-header">
            标题栏
        </view>

        <!-- 页面主体 -->
        <view class="page-main">
            <scroll-view class="page-main-scroll" style="height: 100%" :scroll-y="true" :scroll-with-animation="true">
                <view class="page-main-list" v-for="(item,index) in list" :key="index">
                    {{item.cont}}
                </view>
            </scroll-view>
        </view>

        <!-- 页面底部 -->
        <view class="page-footer">
            <button type="primary">提交</button>
        </view>
    </view>
</template>
<script>
	export default {
	        data() {
	            return {
	                list: [{
	                        cont: "张三"
	                    },
	                    {
	                        cont: "张三"
	                    },
	                    {
	                        cont: "张三"
	                    },
	                    {
	                        cont: "张三"
	                    },
	
	                    {
	                        cont: "张三"
	                    },
	                    {
	                        cont: "张三"
	                    },
	                    {
	                        cont: "张三"
	                    },
	                    {
	                        cont: "张三"
	                    },
	
	                    {
	                        cont: "张三"
	                    },
	                    {
	                        cont: "张三"
	                    },
	                    {
	                        cont: "张三"
	                    },
	                    {
	                        cont: "张三"
	                    },
	                    {
	                        cont: "张三"
	                    },
	                    {
	                        cont: "张三"
	                    },
	                    {
	                        cont: "张三=="
	                    },
	                ],
	            }
	        }
	    }
</script>

<style lang="scss">
	/* 设置页面背景色 */
	page {
		background-color: #f1f1f1;
		width: 100%;
		height: 100%;
	}
    .page-wraper {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }
    .page-header {
        background: rgb(8, 117, 94);
        color: #fff;
        line-height: 100rpx;
        /* 不放大不缩小固定100rpx */
        flex: 0 0 100rpx;
    }
    .page-main {
        flex: 1;
        position: relative;
    }
    .page-main-scroll {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    .page-main-list {
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        background: #e0e0e0;

    }
    .page-footer {
        color: #fff;
        line-height: 100rpx;
        /* 不放大不缩小固定100rpx */
        flex: 0 0 100rpx;
        background-color: #00AAFF;
    }
</style>