星图keep-alive

.env.development

@@ -1,4 +1,4 @@
-VUE_APP_BASE_URL=https://test.raex.vip/
+VUE_APP_BASE_URL=https://www.raex.vip/
 NODE_ENV=development
 VUE_APP_PUBLIC_PATH=/
 ASSETS_PATH=raex

src/views/Home.vue

@@ -191,8 +191,6 @@ import banner from '../mixins/banner';
 import ProductLarge from '../components/product/productLarge.vue';
 import ProductSmall from '../components/product/productSmall.vue';
 import { mapState } from 'vuex';
-import NewsInfo from '../components/product/NewsInfo';
-import NewsSmall from '../components/product/NewsSmall.vue';
 import NewsRecord from '../components/product/NewsRecord.vue';
 import RankInfo from '../components/creator/RankInfo.vue';
 import HotCollect from '../components/product/HotCollect.vue';

src/views/StarMap.vue

@@ -1,5 +1,13 @@
 <template>
-    <div class="container">
+    <van-pull-refresh
+        class="container"
+        success-text="加载成功"
+        success-duration="500"
+        v-model="isLoading"
+        :head-height="80"
+        @refresh="onRefresh"
+        pageType="light"
+    >
         <div class="bg">
             <img src="@assets/png-xingtu-bg.png" alt="" />
         </div>
@@ -32,20 +40,25 @@
         <van-list class="list" v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
             <product-info v-for="(item, index) in list" dark :key="index" v-model:info="list[index]"></product-info>
         </van-list>
-    </div>
+
+        <img src="../assets/png-zhiding.png" @click="goTop" class="goTop" v-if="bodyScroll > 200" alt="" />
+    </van-pull-refresh>
 </template>
 
 <script>
 import list from '../mixins/list';
 import ProductInfo from '../components/product/productInfo.vue';
 export default {
+    name: 'starMap',
     mixins: [list],
+    inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll', 'bodyScroll'],
     components: {
         ProductInfo
     },
     data() {
         return {
-            url: '/collection/all'
+            url: '/collection/all',
+            scrollTop: 0
         };
     },
     methods: {
@@ -58,7 +71,33 @@ export default {
                 },
                 sort: 'id,desc'
             };
+        },
+        goTop() {
+            this.changeScroll(0, true);
+        },
+        onRefresh() {
+            this.getData(true).then(() => {
+                this.isLoading = false;
+            });
+            // setTimeout(() => {
+
+            // }, 1000);
         }
+    },
+    activated() {
+        this.$nextTick(() => {
+            this.changeScroll(this.scrollTop || 0);
+        });
+    },
+    beforeRouteLeave(to, from, next) {
+        if (!to.meta.menuPage) {
+            this.scrollTop = this.scrollWrapper.scrollTop;
+            this.setKeeps(['index', 'starMap']);
+        } else {
+            this.scrollTop = 0;
+            this.setKeeps(['index', 'starMap'], false);
+        }
+        next();
     }
 };
 </script>
@@ -160,4 +199,15 @@ export default {
 .list {
     padding: 20px 8px 100px;
 }
+
+.goTop {
+    position: fixed;
+    right: 16px;
+    bottom: 100px;
+    bottom: calc(env(safe-area-inset-bottom) + 100px);
+    width: 40px;
+    height: 40px;
+    display: block;
+    z-index: 20;
+}
 </style>