fs-uni-template/components/fs-container/fs-container.vue

<template>
	<view class="fs-container">
		<view class="fs-container-header">
			<slot name="header"></slot>
		</view>
		<view class="fs-container-main" :style="{paddingTop: top + 'px',paddingBottom: bottom + 'px'}">
			<slot></slot>
		</view>
		<view class="fs-container-footer">
			<slot name="footer"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"fs-container",
		data() {
			return {
				top: 0,
				bottom: 0
			};
		},
		mounted() {
			uni.createSelectorQuery().in(this).select('.fs-container-header').boundingClientRect(data => {
				this.top = data.height
			}).exec()
			uni.createSelectorQuery().in(this).select('.fs-container-footer').boundingClientRect(data => {
				this.bottom = data.height
			}).exec()
		}
	}
</script>

<style lang="scss" scoped>
.fs-container{
	&-header{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
	}
	
	&-footer{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
	}
}
</style>