flex布局实现自定义首尾固定 中间滚动

实现自定义首尾中间自适应
原理：

1. 设置body，html的width和height为100%
2. 最外部盒子width，height设置100%沾满全屏并设置flex属性 通过flex-direction改变主轴方向为纵向
3. 首尾盒子设置高度或者padding撑起 设置flex-shrink:0
4. 中间部分用scroll-view ，width、height均为100%撑满
5. 最后scroll-view设置overflow：hidden 就可以了

直接上代码

<template>
	<view class="w100m h100m flex flex-direction">
		<view class="w100m h150 bg-white  relative">
			<view class="absolute absolute_lb w100m   text-center">顶部</view>
		</view>
		<scroll-view scroll-y="true" class="w100m  h100m  ">
			<view class="w100m h100m ">
				<view v-for="(item,index) in 100" :key="index">
					{{index+1}}
				</view>
			</view>
		</scroll-view>
		<view class=" w100m h150 bg-white align-center flex-shrink flex-center  align-center  flex  " >
			尾巴
		</view>
	</view>
</template>
<style lang="scss">
	page,
	body,
	uni-page-body {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.w100m{
		width: 100%;
	}
	.h100m{
		height: 100%;
	}
	.flex{
		display: flex;
	}
	.flex-direction{
		flex-direction: column;
	}
	.align-center{
		align-items: center;
	}
	.flex-shrink{
		flex-shrink: 0;
	}
	.flex-center{
		justify-content: center;
	}
	.h150{
		height: 150rpx;
	}
	.relative{
		position: relative;
	}
	.absolute{
		position: absolute;
	}
	.absolute_lb{
		bottom: 0;
		left: 0;
	}
	.text-center{
		text-align: center;
	}
	.bg-white{
		background: #fff;
	}
	scroll-view {
		overflow: hidden;
	}

</style>