更改功德箱未显示完

src/App.vue

@@ -17,13 +17,12 @@
 <script>
 import { tabbar } from '../src/router';
 import safeAreaInsets from 'safe-area-insets';
-console.log('底部安全区：', window.screen.availHeight, safeAreaInsets.bottom)
 export default {
     name: 'App',
     data() {
         return {
             active: '3',
-            minHeight: window.innerHeight - safeAreaInsets.bottom,
+            minHeight: 0,
             tabbar,
             tabHeight: 0,
         };
@@ -34,7 +33,8 @@ export default {
             refs: this.$refs,
             safeAreaInsetBottom: safeAreaInsets.bottom,
             screenHeight: window.innerHeight - safeAreaInsets.bottom,
-            parentHeight: this.minHeight - this.tabHeight
+            parentHeight: this.minHeight - this.tabHeight,
+            minHeight: this.minHeight,
         };
     },
     watch: {
@@ -58,6 +58,12 @@ export default {
     mounted(){
         console.log('launch', this.$route.query)
         this.$store.commit('SET_LAUNCH', this.$route.query)
+
+        console.log( safeAreaInsets.bottom)
+        setTimeout(() => {
+            console.log( safeAreaInsets.bottom)
+            this.minHeight = window.innerHeight - safeAreaInsets.bottom;
+        }, 30)
     },
     computed: {
         showTabbar() {
@@ -101,4 +107,38 @@ export default {
         bottom: 0;
     }
 }
+.loadmore{
+    font-size: .4rem;
+    text-align: center;
+    color: #888;
+    padding: .4rem 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .icon{
+        width: .6rem;
+        vertical-align: middle;
+        margin-right: .2rem;
+        animation: loading 3s linear infinite;
+    }
+}
+
+.no-more{
+    font-size: .4rem;
+    text-align: center;
+    color: #888;
+    padding: .4rem 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@keyframes loading {
+    from{
+        transform: rotateZ(0);
+    }
+    to{
+        transform: rotateZ(-360deg);
+    }
+}
 </style>