Pārlūkot izejas kodu

slot外部嵌套view解决内部元素无法吸顶问题,设置组件高度添加加减像素逻辑

xiaohaizhao 2 gadi atpakaļ
vecāks
revīzija
9cc8df7f98
1 mainītis faili ar 19 papildinājumiem un 20 dzēšanām
  1. 19 20
      components/My_listbox.vue

+ 19 - 20
components/My_listbox.vue

@@ -4,9 +4,13 @@
         <scroll-view class="scroll-view" scroll-y :refresher-enabled='pullDown' :refresher-triggered='inRefresh'
             :style="{ height: height + 'px' }" :triggered='true' @refresherrefresh='pullToRefresh' :lower-threshold='300'
             @scrolltolower='loadThePage'>
-            <slot />
-
-            <u-empty v-if="empty" :mode="mode" />
+            <view>
+                <slot />
+            </view>
+            <view v-if="empty">
+                <view :style="{ height: tovw(occupyHeight) }" />
+                <u-empty :mode="mode" />
+            </view>
         </scroll-view>
     </view>
 </template>
@@ -24,6 +28,10 @@ export default {
         pullDown: {
             type: Boolean,
             default: true
+        },
+        occupyHeight: {
+            type: Number,
+            default: 50
         }
     },
     data() {
@@ -49,8 +57,14 @@ export default {
             this.$emit("getlist", false)
         },
         /* 设置组件高度 */
-        setHeight() {
-            this.getHeight("#mylisttop", this).then(height => {
+        setHeight(mode, num) {
+            this.getHeight("#mylisttop", this).then(res => {
+                let height = res;
+                if (mode == 'add') {
+                    height = (res - 0) + (num - 0);
+                } else if (mode == 'minus') {
+                    height = res - num
+                }
                 if (this.height != height) this.height = height
             });
         }
@@ -63,19 +77,4 @@ export default {
     position: relative;
 }
 
-/* 适配苹果手机底部安全距离 */
-.safety {
-    height: constant(safe-area-inset-bottom);
-    height: env(safe-area-inset-bottom);
-}
-
-
-/deep/ .u-empty .u-icon .u-icon__icon {
-    font-size: 90px !important;
-    line-height: 90px !important;
-}
-
-/deep/ .u-empty__text {
-    font-size: 14px !important;
-}
 </style>