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>
/**
 * 容器组件
 * @description 容器组件
 */
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: var(--window-top);
		left: 0;
		right: 0;
		z-index: 100;
	}

	&-footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: var(--window-bottom);
		z-index: 100;
	}
}
</style>