Kaynağa Gözat

重构组件Container,可以和loadmore组件配合使用

ming 3 yıl önce
ebeveyn
işleme
7b81c31a84

+ 36 - 7
components/fs-container/fs-container.vue

@@ -1,10 +1,14 @@
 <template>
-	<view class="container">
-		<slot name="header"></slot>
-		<view class="main">
+	<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>
-		<slot name="footer"></slot>
+		<view class="fs-container-footer">
+			<slot name="footer"></slot>
+		</view>
 	</view>
 </template>
 
@@ -13,12 +17,37 @@
 		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>
-
+<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>

+ 1 - 1
components/fs-search/fs-search.vue

@@ -137,7 +137,7 @@
   height: 100%;
   width: 100%;
   padding-left: 68rpx;
-  padding-right: 60rpx;
+  padding-right: 70rpx;
   border-radius: 6rpx;
   box-sizing: border-box;
 	outline: none;