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

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

@@ -6,8 +6,8 @@
       </template>
     </BaseHeader>
     <div class="content">
-      <Loading  v-if="loading"/>
-      <Scroll @pulldown="loadData" v-else>
+      <Loading v-if="loading"/>
+      <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,39 +1,44 @@
 <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>
-      <NoMore/>
-      <div class="list">
-        <!--TODO　超过3行显示全文-->
-        <div class="item" v-for="item in list" @click="goDetail(item)">
-          <div class="title">{{ item.title }}
-            <div class="ml1r not-read" v-if="!item.read"></div>
-          </div>
-          <div class="time">{{ item.time }}</div>
-          <div class="content-text">{{ item.content }}</div>
-          <div class="look-detail">
-            <span>查看详情</span>
-            <back direction="right" scale=".6"/>
+    <Scroll v-else ref="mainScroll">
+      <div class="content">
+        <NoMore/>
+        <div class="list">
+          <!--TODO　超过3行显示全文-->
+          <div class="item" v-for="item in list" @click="goDetail(item)">
+            <div class="title">{{ item.title }}
+              <div class="ml1r not-read" v-if="!item.read"></div>
+            </div>
+            <div class="time">{{ item.time }}</div>
+            <div class="content-text">{{ item.content }}</div>
+            <div class="look-detail">
+              <span>查看详情</span>
+              <back direction="right" scale=".6"/>
+            </div>
           </div>
         </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
-
-      nextTick(() => {
-        let content = this.$refs['content']
-        content.scrollTo({top: content.scrollHeight - content.clientHeight})
-      })
+      await nextTick()
+      this.$refs.mainScroll.scrollBottom()
     },
     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;
-    height: 100vh;
-    overflow: auto;
+    padding-top: 0;
     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,15 +10,18 @@
     </BaseHeader>
     <Loading v-if="loading"/>
     <div class="content" v-else>
-      <div class="list" ref="content">
-        <NoMore/>
-        <div class="item" v-for="item in list" @click="goDetail(item)">
-          <div class="title">{{ item.title }}
+      <Scroll ref="mainScroll">
+        <div class="list">
+          <NoMore/>
+          <div class="item" v-for="item in list" @click="goDetail(item)">
+            <div class="title">{{ item.title }}
+            </div>
+            <div class="time">{{ item.time }}</div>
+            <div class="content-text">{{ item.content }}</div>
           </div>
-          <div class="time">{{ item.time }}</div>
-          <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
-
-      nextTick(() => {
-        let content = this.$refs['content']
-        content.scrollTo({top: content.scrollHeight - content.clientHeight})
-      })
+      await nextTick()
+      this.$refs.mainScroll.scrollBottom()
     },
     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);
-      overflow: auto;
+      padding: @padding-page;
+      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,42 +10,44 @@
     </BaseHeader>
     <Loading v-if="loading"/>
     <div class="content" v-else>
-      <div class="list" ref="content">
-        <NoMore/>
-        <!--TODO　超过3行显示全文-->
-        <div class="item" v-for="item in list" @click="$no">
-          <div class="header">
-            <div class="left">
-              <img src="../../../assets/img/icon/msg-icon9.webp" alt="">
+      <Scroll ref="mainScroll">
+        <div class="list">
+          <NoMore/>
+          <!--TODO　超过3行显示全文-->
+          <div class="item" v-for="item in list" @click="$no">
+            <div class="header">
+              <div class="left">
+                <img src="../../../assets/img/icon/msg-icon9.webp" alt="">
+              </div>
+              <div class="right">
+                <template v-if="item.type === 1">
+                  <span>零钱任务</span>
+                </template>
+                <template v-if="item.type === 2">
+                  <span>钱包任务</span>
+                </template>
+                <img @click.stop="isShowSetting = true" src="../../../assets/img/icon/menu-gray.png" alt="">
+              </div>
             </div>
-            <div class="right">
-              <template v-if="item.type === 1">
-                <span>零钱任务</span>
-              </template>
-              <template v-if="item.type === 2">
-                <span>钱包任务</span>
-              </template>
-              <img @click.stop="isShowSetting = true" src="../../../assets/img/icon/menu-gray.png" alt="">
+            <div class="title">{{ item.title }}</div>
+            <div class="time">{{ item.time }}</div>
+            <template v-if="item.type === 1">
+              <div class="content-text">退款金额：￥{{ item.money }}</div>
+              <div class="content-text">退回方式：{{ item.toAccountType }}</div>
+              <div class="content-text">退款原因：{{ item.desc }}</div>
+              <div class="content-text">预计到账时间：{{ item.toAccountTime }}</div>
+            </template>
+            <template v-if="item.type === 2">
+              <div class="content-text">{{ item.desc }}</div>
+            </template>
+
+            <div class="look-detail">
+              <span>查看详情</span>
+              <back direction="right" scale=".6"/>
             </div>
           </div>
-          <div class="title">{{ item.title }}</div>
-          <div class="time">{{ item.time }}</div>
-          <template v-if="item.type === 1">
-            <div class="content-text">退款金额：￥{{ item.money }}</div>
-            <div class="content-text">退回方式：{{ item.toAccountType }}</div>
-            <div class="content-text">退款原因：{{ item.desc }}</div>
-            <div class="content-text">预计到账时间：{{ item.toAccountTime }}</div>
-          </template>
-          <template v-if="item.type === 2">
-            <div class="content-text">{{ item.desc }}</div>
-          </template>
-
-          <div class="look-detail">
-            <span>查看详情</span>
-            <back direction="right" scale=".6"/>
-          </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
-
-      nextTick(() => {
-        let content = this.$refs['content']
-        content.scrollTo({top: content.scrollHeight - content.clientHeight})
-      })
+      await nextTick()
+      this.$refs.mainScroll.scrollBottom()
     },
   }
 }
@@ -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);
-      overflow: auto;
+      padding: @padding-page;
+      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,21 +10,23 @@
     </BaseHeader>
     <Loading v-if="loading"/>
     <div class="content" v-else>
-      <div class="list" ref="content">
-        <NoMore/>
-        <!--TODO　超过3行显示全文-->
-        <div class="item" v-for="item in list" @click="goDetail(item)">
-          <div class="title">{{ item.title }}
-            <div class="ml1r not-read" v-if="!item.read"></div>
-          </div>
-          <div class="time">{{ item.time }}</div>
-          <div class="content-text">{{ item.content }}</div>
-          <div class="look-detail" v-if="item.detail">
-            <span>查看详情</span>
-            <back direction="right" scale=".6"/>
+      <Scroll ref="mainScroll">
+        <div class="list">
+          <NoMore/>
+          <!--TODO　超过3行显示全文-->
+          <div class="item" v-for="item in list" @click="goDetail(item)">
+            <div class="title">{{ item.title }}
+              <div class="ml1r not-read" v-if="!item.read"></div>
+            </div>
+            <div class="time">{{ item.time }}</div>
+            <div class="content-text">{{ item.content }}</div>
+            <div class="look-detail" v-if="item.detail">
+              <span>查看详情</span>
+              <back direction="right" scale=".6"/>
+            </div>
           </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
-
-      nextTick(() => {
-        let content = this.$refs['content']
-        content.scrollTo({top: content.scrollHeight - content.clientHeight})
-      })
+      await nextTick()
+      this.$refs.mainScroll.scrollBottom()
     },
     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,30 +10,32 @@
     </BaseHeader>
     <Loading v-if="loading"/>
     <div class="content" v-else>
-      <div class="list" ref="content">
-        <NoMore/>
-        <!--TODO　超过3行显示全文-->
-        <div class="item" v-for="item in list" @click="goDetail(item)">
-          <div class="header">
-            <div class="left">
-              <img src="../../../assets/img/icon/message/task.webp" alt="">
+      <Scroll ref="mainScroll">
+        <div class="list">
+          <NoMore/>
+          <!--TODO　超过3行显示全文-->
+          <div class="item" v-for="item in list" @click="goDetail(item)">
+            <div class="header">
+              <div class="left">
+                <img src="../../../assets/img/icon/message/task.webp" alt="">
+              </div>
+              <div class="right">
+                <span>成长任务</span>
+                <img @click.stop="isShowSetting = true" src="../../../assets/img/icon/menu-gray.png" alt="">
+              </div>
             </div>
-            <div class="right">
-              <span>成长任务</span>
-              <img @click.stop="isShowSetting = true" src="../../../assets/img/icon/menu-gray.png" alt="">
+            <div class="title">{{ item.title }}
+              <div class="ml1r not-read" v-if="!item.read"></div>
+            </div>
+            <div class="time">{{ item.time }}</div>
+            <div class="content-text">{{ item.content }}</div>
+            <div class="look-detail" v-if="item.detail">
+              <span>查看详情</span>
+              <back direction="right" scale=".6"/>
             </div>
-          </div>
-          <div class="title">{{ item.title }}
-            <div class="ml1r not-read" v-if="!item.read"></div>
-          </div>
-          <div class="time">{{ item.time }}</div>
-          <div class="content-text">{{ item.content }}</div>
-          <div class="look-detail" v-if="item.detail">
-            <span>查看详情</span>
-            <back direction="right" scale=".6"/>
           </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
-
-      nextTick(() => {
-        let content = this.$refs['content']
-        content.scrollTo({top: content.scrollHeight - content.clientHeight})
-      })
+      await nextTick()
+      this.$refs.mainScroll.scrollBottom()
     },
     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);
-      overflow: auto;
+      padding: @padding-page;
+      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: {