uniapp使用flex布局实现头部底部固定，中间滚动

uniapp使用flex布局实现头部底部固定，中间滚动

<template>
	<view style="height: 100%;display: flex; flex-direction: column;">
		<view style="height: 100rpx;background-color: red;"> xxxxxxxx</view>
		<view style="overflow-y: auto; flex: 1; width: 100%;">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
				<view id="demo1" class="scroll-view-item">A</view>
				<view id="demo2" class="scroll-view-item">B</view>
				<view id="demo3" class="scroll-view-item">C</view>
				<view id="demo4" class="scroll-view-item">D</view>
			</scroll-view>
		</view>
		<view style="background-color: red;height: 100rpx;"> xxxxxxxx</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		methods: {
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
		}
	}
</script>
 
<style>
	page{
		height: 100%;
	}
	.scroll-Y {
		height: 100%;
	}
	.scroll-view-item {
		height: 500rpx;
		line-height: 500rpx;
		text-align: center;
		font-size: 36rpx;
	}
</style>