修复列表页面缓存后，返回列表位置不正确的问题

src/assets/less/variables.less

@@ -1,5 +1,5 @@
 @footer-height: 5rem;
-@header-height: 6.1rem;
+@header-height: 6rem;
 @indicator-height: 5rem;
 
 @padding-page: 1.5rem;

src/components/BaseHeader.vue

@@ -84,6 +84,7 @@ export default {
     justify-content: center;
     align-items: center;
     height: @header-height;
+    box-sizing: border-box;
     border-bottom: 1px solid #cccccc11;
     position: relative;
 

src/components/Scroll.vue

@@ -96,6 +96,11 @@ export default {
         }
       }
     },
+    scrollBottom() {
+      nextTick(()=>{
+        this.wrapper.scrollTo({top: this.wrapper.scrollHeight - this.wrapper.clientHeight})
+      })
+    }
   }
 }
 </script>

src/pages/me/Uploader.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="Uploader">
     <div ref="float" class="float" :class="floatFixed?'fixed':''">
-      <div class="left" @click="$emit('back')">
+      <div class="left" @click="back">
         <img src="../../assets/img/icon/next.svg" alt="">
       </div>
       <transition name="fade">
@@ -204,7 +204,6 @@
         <img class="download" src="../../assets/img/icon/components/video/download.png" alt="" @click.stop="$no">
       </div>
     </transition>
-
   </div>
 </template>
 <script lang="jsx">
@@ -375,6 +374,7 @@ export default {
     }
   },
   mounted() {
+
     setTimeout(() => {
       this.refs.header = this.$refs.header
       this.refs.headerHeight = this.$refs.header.offsetHeight
@@ -389,6 +389,13 @@ export default {
     bus.on('baseSlide-end', () => this.canScroll = true)
   },
   methods: {
+    back() {
+      if (this.$route.path === '/me/uploader') {
+        this.$back()
+      } else {
+        this.$emit('back')
+      }
+    },
     copy() {
       const input = document.createElement('input');
       input.setAttribute('readonly', 'readonly');

src/pages/message/Fans.vue

@@ -7,7 +7,7 @@
     </BaseHeader>
     <div class="content">
       <Loading v-if="loading"/>
-      <Scroll @pulldown="loadData" v-else>
+      <Scroll ref="mainScroll" @pulldown="loadData" v-else>
         <Peoples v-model:list="fans"
                  :loading="loadingMore"
                  mode="fans"/>
@@ -29,8 +29,10 @@ import People from "../people/components/People";
 import Scroll from "../../components/Scroll";
 import Loading from "../../components/Loading";
 import Peoples from "../people/components/Peoples";
+import BasePage from "../BasePage";
 
 export default {
+  extends: BasePage,
   name: "Fans",
   components: {
     Scroll,

src/pages/message/notice/DouyinHelper.vue

@@ -1,12 +1,13 @@
 <template>
   <div id="DouyinHelper">
-    <BaseHeader>
+    <BaseHeader :isFixed="false">
       <template v-slot:center>
         <span class="f16">抖音小助手</span>
       </template>
     </BaseHeader>
     <Loading v-if="loading"/>
-    <div class="content" ref="content" v-else>
+    <Scroll v-else ref="mainScroll">
+      <div class="content">
         <NoMore/>
         <div class="list">
           <!--TODO　超过3行显示全文-->
@@ -23,17 +24,21 @@
           </div>
         </div>
       </div>
+    </Scroll>
   </div>
 </template>
 <script>
 import {nextTick} from "vue";
+import Scroll from "../../../components/Scroll";
+import BasePage from "../../BasePage";
 
 export default {
+  extends: BasePage,
   name: "DouyinHelper",
-  components: {},
+  components: {Scroll},
   data() {
     return {
-      loading:false,
+      loading: false,
       list: [
         {
           read: false,
@@ -82,15 +87,12 @@ export default {
   mounted() {
   },
   methods: {
-    async getData(){
+    async getData() {
       this.loading = true
       await this.$sleep(700)
       this.loading = false
-
+      await nextTick()
-      nextTick(() => {
+      this.$refs.mainScroll.scrollBottom()
-        let content = this.$refs['content']
-        content.scrollTo({top: content.scrollHeight - content.clientHeight})
-      })
     },
     goDetail(item) {
       item.read = true
@@ -113,11 +115,13 @@ export default {
   color: white;
   font-size: 1.4rem;
 
+  .scroll {
+    height: calc(100vh - @header-height);
+  }
+
   .content {
     padding: @padding-page;
-    padding-top: 6rem;
+    padding-top: 0;
-    height: 100vh;
-    overflow: auto;
     box-sizing: border-box;
 
     .list {
@@ -158,5 +162,6 @@ export default {
       }
     }
   }
+
 }
 </style>

src/pages/message/notice/LiveNotice.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="TaskNotice">
-    <BaseHeader>
+    <BaseHeader :isFixed="false">
       <template v-slot:center>
         <span class="f16">直播通知</span>
       </template>
@@ -10,7 +10,8 @@
     </BaseHeader>
     <Loading v-if="loading"/>
     <div class="content" v-else>
-      <div class="list" ref="content">
+      <Scroll ref="mainScroll">
+        <div class="list">
           <NoMore/>
           <div class="item" v-for="item in list" @click="goDetail(item)">
             <div class="title">{{ item.title }}
@@ -19,6 +20,8 @@
             <div class="content-text">{{ item.content }}</div>
           </div>
         </div>
+      </Scroll>
+
     </div>
   </div>
 </template>
@@ -26,15 +29,19 @@
 import {nextTick} from "vue";
 import Mask from "../../../components/Mask";
 import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
+import Scroll from "../../../components/Scroll";
+import BasePage from "../../BasePage";
 
 export default {
-  name: "SystemNotice",
+  extends: BasePage,
+  name: "LiveNotice",
   components: {
+    Scroll,
     FromBottomDialog
   },
   data() {
     return {
-      loading:false,
+      loading: false,
       list: [
         {
           title: '直播举报反馈',
@@ -59,11 +66,8 @@ export default {
       this.loading = true
       await this.$sleep(700)
       this.loading = false
-
+      await nextTick()
-      nextTick(() => {
+      this.$refs.mainScroll.scrollBottom()
-        let content = this.$refs['content']
-        content.scrollTo({top: content.scrollHeight - content.clientHeight})
-      })
     },
     goDetail(item) {
       item.read = true
@@ -84,18 +88,20 @@ export default {
   right: 0;
   bottom: 0;
   top: 0;
-  overflow: auto;
   color: white;
   font-size: 1.4rem;
 
+  .scroll {
+    height: calc(100vh - @header-height);
+  }
+
   .content {
-    padding-top: 6rem;
+    height: calc(100vh - @header-height);
 
     .list {
-      height: calc(100vh - 6rem);
+      padding: @padding-page;
-      overflow: auto;
+      padding-top: 0;
       box-sizing: border-box;
-      padding: 0 @padding-page;
 
       .item {
         padding: @padding-page;

src/pages/message/notice/MoneyNotice.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="MoneyNotice">
-    <BaseHeader>
+    <BaseHeader :isFixed="false">
       <template v-slot:center>
         <span class="f16">钱包通知</span>
       </template>
@@ -10,7 +10,8 @@
     </BaseHeader>
     <Loading v-if="loading"/>
     <div class="content" v-else>
-      <div class="list" ref="content">
+      <Scroll ref="mainScroll">
+        <div class="list">
           <NoMore/>
           <!--TODO　超过3行显示全文-->
           <div class="item" v-for="item in list" @click="$no">
@@ -46,6 +47,7 @@
             </div>
           </div>
         </div>
+      </Scroll>
     </div>
 
     <from-bottom-dialog
@@ -71,11 +73,15 @@
 import {nextTick} from "vue";
 import Mask from "../../../components/Mask";
 import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
+import Scroll from "../../../components/Scroll";
+import BasePage from "../../BasePage";
 
 export default {
-  name: "SystemNotice",
+  extends: BasePage,
+  name: "MoneyNotice",
   components: {
-    FromBottomDialog
+    FromBottomDialog,
+    Scroll
   },
   data() {
     return {
@@ -112,11 +118,8 @@ export default {
       this.loading = true
       await this.$sleep(700)
       this.loading = false
-
+      await nextTick()
-      nextTick(() => {
+      this.$refs.mainScroll.scrollBottom()
-        let content = this.$refs['content']
-        content.scrollTo({top: content.scrollHeight - content.clientHeight})
-      })
     },
   }
 }
@@ -131,18 +134,20 @@ export default {
   right: 0;
   bottom: 0;
   top: 0;
-  overflow: auto;
   color: white;
   font-size: 1.4rem;
 
+  .scroll {
+    height: calc(100vh - @header-height);
+  }
+
   .content {
-    padding-top: 6rem;
+    height: calc(100vh - @header-height);
 
     .list {
-      height: calc(100vh - 6rem);
+      padding: @padding-page;
-      overflow: auto;
+      padding-top: 0;
       box-sizing: border-box;
-      padding: 0 @padding-page;
 
       .item {
         padding: @padding-page;

src/pages/message/notice/NoticeSetting.vue

@@ -77,7 +77,7 @@
 import Switches from "../components/swtich/switches";
 
 export default {
-  name: "SystemNotice",
+  name: "NoticeSetting",
   components: {Switches},
   props: {
     modelValue: false

src/pages/message/notice/SystemNotice.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="SystemNotice">
-    <BaseHeader>
+    <BaseHeader :isFixed="false">
       <template v-slot:center>
         <span class="f16">系统通知</span>
       </template>
@@ -10,7 +10,8 @@
     </BaseHeader>
     <Loading v-if="loading"/>
     <div class="content" v-else>
-      <div class="list" ref="content">
+      <Scroll ref="mainScroll">
+        <div class="list">
           <NoMore/>
           <!--TODO　超过3行显示全文-->
           <div class="item" v-for="item in list" @click="goDetail(item)">
@@ -25,6 +26,7 @@
             </div>
           </div>
         </div>
+      </Scroll>
 
       <!--      TODO 子页面未做-->
       <div class="hover-dialog left" v-if="isShowLeftHover">
@@ -61,10 +63,13 @@
 <script>
 import {nextTick} from "vue";
 import Mask from "../../../components/Mask";
+import Scroll from "../../../components/Scroll";
+import BasePage from "../../BasePage";
 
 export default {
+  extends: BasePage,
   name: "SystemNotice",
-  components: {Mask},
+  components: {Mask, Scroll},
   data() {
     return {
       loading: false,
@@ -132,11 +137,8 @@ export default {
       this.loading = true
       await this.$sleep(700)
       this.loading = false
-
+      await nextTick()
-      nextTick(() => {
+      this.$refs.mainScroll.scrollBottom()
-        let content = this.$refs['content']
-        content.scrollTo({top: content.scrollHeight - content.clientHeight})
-      })
     },
     goDetail(item) {
       item.read = true
@@ -157,19 +159,20 @@ export default {
   right: 0;
   bottom: 0;
   top: 0;
-  overflow: auto;
   color: white;
   font-size: 1.4rem;
 
+  .scroll {
+    height: calc(100vh - @header-height - @header-height);
+  }
+
   .content {
-    padding-top: 6rem;
+    height: calc(100vh - @header-height);
+    padding: @padding-page;
+    padding-top: 0;
+    box-sizing: border-box;
 
     .list {
-      height: calc(100vh - 12rem);
-      overflow: auto;
-      box-sizing: border-box;
-      padding: 0 @padding-page;
-
       .item {
         padding: @padding-page;
         background: @second-btn-color-tran;

src/pages/message/notice/TaskNotice.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="TaskNotice">
-    <BaseHeader>
+    <BaseHeader :isFixed="false">
       <template v-slot:center>
         <span class="f16">任务通知</span>
       </template>
@@ -10,7 +10,8 @@
     </BaseHeader>
     <Loading v-if="loading"/>
     <div class="content" v-else>
-      <div class="list" ref="content">
+      <Scroll ref="mainScroll">
+        <div class="list">
           <NoMore/>
           <!--TODO　超过3行显示全文-->
           <div class="item" v-for="item in list" @click="goDetail(item)">
@@ -34,6 +35,7 @@
             </div>
           </div>
         </div>
+      </Scroll>
       <div class="footer" @click="$no">查看更多任务</div>
     </div>
 
@@ -60,15 +62,19 @@
 import {nextTick} from "vue";
 import Mask from "../../../components/Mask";
 import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
+import Scroll from "../../../components/Scroll";
+import BasePage from "../../BasePage";
 
 export default {
+  extends: BasePage,
   name: "SystemNotice",
   components: {
-    FromBottomDialog
+    FromBottomDialog,
+    Scroll
   },
   data() {
     return {
-      loading:false,
+      loading: false,
       isShowSetting: false,
       openNotice: false,
       list: [
@@ -86,6 +92,20 @@ export default {
           time: '2021-10-12 12:12',
           content: '4.24-4.28，公开发布1个道具作品，即得50-100的额外流量。快来发布视频，获得更多关注'
         },
+        {
+          type: 1,
+          title: '发作品得流量',
+          detail: 'xxx',
+          time: '2021-10-12 12:12',
+          content: '4.24-4.28，公开发布1个道具作品，即得50-100的额外流量。快来发布视频，获得更多关注'
+        },
+        {
+          type: 1,
+          title: '发作品得流量',
+          detail: 'xxx',
+          time: '2021-10-12 12:12',
+          content: '4.24-4.28，公开发布1个道具作品，即得50-100的额外流量。快来发布视频，获得更多关注'
+        },
       ]
     }
   },
@@ -99,11 +119,8 @@ export default {
       this.loading = true
       await this.$sleep(700)
       this.loading = false
-
+      await nextTick()
-      nextTick(() => {
+      this.$refs.mainScroll.scrollBottom()
-        let content = this.$refs['content']
-        content.scrollTo({top: content.scrollHeight - content.clientHeight})
-      })
     },
     goDetail(item) {
       item.read = true
@@ -124,18 +141,20 @@ export default {
   right: 0;
   bottom: 0;
   top: 0;
-  overflow: auto;
   color: white;
   font-size: 1.4rem;
 
+  .scroll {
+    height: calc(100vh - @header-height - @header-height);
+  }
+
   .content {
-    padding-top: 6rem;
+    height: calc(100vh - @header-height);
 
     .list {
-      height: calc(100vh - 12rem);
+      padding: @padding-page;
-      overflow: auto;
+      padding-top: 0;
       box-sizing: border-box;
-      padding: 0 @padding-page;
 
       .item {
         padding: @padding-page;
@@ -204,8 +223,9 @@ export default {
 
     .footer {
       border-top: 1px solid @line-color;
-      height: 6rem;
+      height: @header-height;
       display: flex;
+      box-sizing: border-box;
       align-items: center;
       justify-content: center;
     }

src/pages/people/components/People.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="People">
+  <div class="People" @click="$nav('/me/uploader')">
     <img :src="$imgPreview(people.avatar)" alt="" class="head-image pull-left">
     <div class="content">
       <template v-if="mode === 'normal'">

src/router/routes.js

@@ -70,6 +70,7 @@ import PasswordLogin from "../pages/login/PasswordLogin";
 import VerificationCode from "../pages/login/VerificationCode";
 import RetrievePassword from "../pages/login/RetrievePassword";
 import Help from "../pages/login/Help";
+import Uploader from "../pages/me/Uploader";
 
 const routes = [
   // {path: '', component: Music},
@@ -155,9 +156,10 @@ const routes = [
   {path: '/login/retrieve-password', component: RetrievePassword},
   {path: '/login/help', component: Help},
 
-  //message页面要跳到这页面，所以放后面
+  //前面的要跳到这些页面，所以放后面
   {path: '/me/request-update', component: RequestUpdate},
   {path: '/me/my-request-update', component: MyRequestUpdate},
+  {path: '/me/uploader', component: Uploader},
 ]
 
 export default routes

src/store/index.js

@@ -642,7 +642,7 @@ const store = Vuex.createStore({
           store.excludeRoutes.splice(resIndex, 1)
         }
       }
-      // console.log('store.excludeRoutes', store.excludeRoutes)
+      console.log('store.excludeRoutes', store.excludeRoutes)
     },
   },
   actions: {