uni-app实现上下固定中间滚动布局

1. 视图部分

<template>
	<view class="page">
		<view class="page__header">
			header
		</view>
		<view class="page__content">
			<scroll-view class="content" scroll-y="true" >
				<view class="list">content</view>
			</scroll-view>
		</view>
		<view class="page__footer">
			footer
		</view>
	</view>
</template>

2. 样式部分

<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.page {
		height: 100%;
		display: flex;
		flex-direction: column;
		&__header {
			height: 80rpx;
			background-color: gray;
		}
		&__content {
			flex: 1;
			position: relative;
			.content {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				.list {
					height: 8000rpx;
				}
			}
		}
		&__footer {
			height: 80rpx;
			background-color: green;
		}
	}
</style>

3.效果图