上传文件至 'components/zj-page-container'

components/zj-page-container/zj-page-container.vue

@@ -0,0 +1,49 @@
+<template>
+  <view
+    :class="{
+      'zj-page-container': true,
+      'zj-page-container-row': direction === 'row',
+      'zj-page-container-column': direction === 'column'
+    }"
+    :style="{
+      width: width,
+      height: height
+    }"
+  >
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'ZjPageContainer',
+  props: {
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    },
+    direction: {
+      type: String,
+      default: 'column'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.zj-page-container {
+  display: flex;
+}
+
+.zj-page-container-row {
+  flex-direction: row;
+}
+
+.zj-page-container-column {
+  flex-direction: column;
+}
+</style>

components/zj-page-container/zj-page-fill.vue

@@ -0,0 +1,86 @@
+<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>