new-greemall-wxapp/components/zj-page-container/zj-page-fill.vue

<template>
	<view :class="['zj-page-fill', zjPageFillClass]">
		<view class="zj-page-fill-absolute">
			<template v-if="scroll">
				<!-- v-bind="scrollAttribute" -->
				<scroll-view class="zj-page-fill-scroll" scroll-y enable-flex @scrolltoupper="
            (...p) => {
              $emit('scrolltoupper', p)
            }
          " @scrolltolower="
            (...p) => {
              $emit('scrolltolower', p)
            }
          " @scroll="
            (...p) => {
              $emit('scroll', p)
            }
          " @refresherpulling="
            (...p) => {
              $emit('refresherpulling', p)
            }
          " @refresherrefresh="
            (...p) => {
              $emit('refresherrefresh', p)
            }
          " @refresherrestore="
            (...p) => {
              $emit('refresherrestore', p)
            }
          " @refresherabort="
            (...p) => {
              $emit('refresherabort', p)
            }
          ">
					<slot></slot>
				</scroll-view>
			</template>
			<template v-else>
				<slot></slot>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ZjPageFill',
		props: {
			scroll: {
				type: Boolean,
				default: true
			},
			scrollAttribute: {
				type: Object,
				default: () => ({})
			},
			zjPageFillClass: {
				type: String,
				default: ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zj-page-fill {
		flex: 1;
		overflow: hidden;
		position: relative;
		height: 100%;

		.zj-page-fill-absolute {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}

		.zj-page-fill-scroll {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
		}
	}
</style>