feat：两个长图页缓存滚动位置

src/store/index.js

@@ -1,105 +1,28 @@
 import { createStore } from 'vuex'
-// import { reportVisitPage } from '@/api.js'
-
-// const loginStatusEnum = {
-//   notLogin: 'not-login',
-//   visitor: 'visitor',
-//   wxUser: 'wxUser',
-// }
 
 export default createStore({
   state: {
     haveShownStartup: process.env.VUE_APP_CLI_MODE === 'dev' ? true : false,
-    // haveShownStartup: false,
-    // loginStatus: loginStatusEnum.notLogin,
-    // token: '',
-    // userInfo: {
-    //   userName: '',
-    //   userId: null,
-    // },
-    // pageVisitRecord: {},
+    scrollPosInMoreContentPage: 0,
+    scrollPosInPaintingListPage: 0,
   },
   getters: {
-    // loginStatusEnum() {
-    //   return loginStatusEnum
-    // }
   },
   mutations: {
     setShowingStartup(state, value) {
       state.haveShownStartup = value
     },
-    // setLoginStatus(state, value) {
-    //   state.loginStatus = value
-    // },
-    // setUserName(state, value) {
-    //   state.userInfo.userName = value
-    // },
-    // setToken(state, value) {
-    //   state.token = value
-    //   localStorage.setItem('token', value)
-    // },
-    // setUserInfo(state, value) {
-    //   state.userInfo = value
-    //   localStorage.setItem('userInfo', JSON.stringify(value))
-    //   if (state.userInfo.score === null) {
-    //     state.userInfo.score = 0
-    //   }
-    // },
-    // logoutCallback(state) {
-    //   state.loginStatus = loginStatusEnum.notLogin
-    //   state.token = ''
-    //   localStorage.removeItem('token')
-    //   state.userInfo = {}
-    //   localStorage.removeItem('userInfo')
-    // },
-    // getPageVisitRecordFromStorage(state) {
-    //   let pageVisitRecordStr = localStorage.getItem('pageVisitRecord')
-    //   if (pageVisitRecordStr) {
-    //     state.pageVisitRecord = JSON.parse(pageVisitRecordStr)
-    //   }
-    // },
-    // setPageVisitRecord(state, value) {
-    //   state.pageVisitRecord = value
-    // }
+    setScrollPosInMoreContentPage(state, v) {
+      state.scrollPosInMoreContentPage = v
+    },
+    setScrollPosInPaintingListPage(state, v) {
+      state.scrollPosInPaintingListPage = v
+    },
   },
   actions: {
     recordShownStartup({ state, commit }) {
       commit('setShowingStartup', true)
     },
-    // recordPageVisitIfNeeded({ state, commit }, { pageId }) {
-    //   let needUpdateStorage = false
-
-    //   let userId = undefined
-    //   if (state.loginStatus !== loginStatusEnum.wxLogin) {
-    //     userId = 'visitor'
-    //   } else {
-    //     userId = state.userInfo.userId
-    //   }
-
-    //   if (!state.pageVisitRecord[userId]) {
-    //     state.pageVisitRecord[userId] = {}
-    //     needUpdateStorage = true
-    //   }
-
-    //   let lastVisitTime = undefined
-    //   lastVisitTime = state.pageVisitRecord[userId][pageId]
-    //   if (lastVisitTime === undefined) {
-    //     state.pageVisitRecord[userId][pageId] = 0
-    //     needUpdateStorage = true
-    //   }
-
-    //   let lastVisitTimeObj = new Date(lastVisitTime)
-    //   let thisVisitTimeObj = new Date()
-    //   if (!(lastVisitTimeObj.getFullYear() === thisVisitTimeObj.getFullYear() && lastVisitTimeObj.getMonth() === thisVisitTimeObj.getMonth() && lastVisitTimeObj.getDay() === thisVisitTimeObj.getDay())) {
-    //     state.pageVisitRecord[userId][pageId] = thisVisitTimeObj.getTime()
-    //     needUpdateStorage = true
-    //     reportVisitPage(pageId)
-    //   }
-
-    //   if (needUpdateStorage) {
-    //     localStorage.setItem('pageVisitRecord', JSON.stringify(state.pageVisitRecord))
-    //   }
-    // }
   },
   modules: {
   }

src/useFunctions/useSmoothSwipe.js

@@ -41,7 +41,8 @@ export default function useSmoothSwipe({
   viewportWidth = document.documentElement.clientWidth,
   speedFactor = 1,
   damping = 0.003,
-  enableAutoMoving = false
+  enableAutoMoving = false,
+  initialTranslateLength = 0
 } = {}) {
   const isOperating = ref(false)
   const haveSwipedThisTime = ref(false)
@@ -49,7 +50,7 @@ export default function useSmoothSwipe({
   let lastMoveEventTimeStamp = 0
   let lastCursorPos = 0
   let moveSpeed = ref(0)
-  let translateLength = ref(0)
+  let translateLength = ref(initialTranslateLength)
   let maxTranslateLengthInner = Infinity
   let isAutoMoving = ref(false)
   let beginAutoMoveIntervalId = null

src/views/MoreContent.vue

@@ -242,7 +242,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onBeforeMount, nextTick } from "vue"
+import { ref, computed, watch, onBeforeMount, nextTick, onBeforeUnmount } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import useSmoothSwipe from "@/useFunctions/useSmoothSwipe.js"
@@ -270,6 +270,7 @@ const {
   scrollTargetRef: scrollTarget,
   maxTranslateLength,
   viewportWidth: windowWidth,
+  initialTranslateLength: store.state.scrollPosInMoreContentPage
 })
 
 // 背景位移
@@ -342,8 +343,7 @@ function onClickRestart() {
   if (haveSwipedThisTime.value) {
     return
   }
-  store.state.haveShownStartup = false
-  router.replace('/')
+  window.location.href = window.location.pathname
 }
 
 const isShowCast = ref(false)
@@ -356,6 +356,9 @@ const unwatch = watch(translateLength, (v) => {
   }
 })
 
+onBeforeUnmount(() => {
+  store.commit('setScrollPosInMoreContentPage', translateLength.value)
+})
 </script>
 
 <style lang="less" scoped>

src/views/PaintingList.vue

@@ -218,7 +218,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, inject } from "vue"
+import { ref, computed, watch, onMounted, inject, onBeforeUnmount } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import useSmoothSwipe from "@/useFunctions/useSmoothSwipe.js"
@@ -262,9 +262,11 @@ const {
   scrollTargetRef: menuEl,
   maxTranslateLength: undefined,
   viewportWidth: windowWidth,
+  initialTranslateLength: store.state.scrollPosInPaintingListPage
 })
 setTimeout(() => {
   computeMaxTranslateLengthInnerByScrollTarget()
+  menuEl.value.scrollLeft = translateLength.value
 }, 100)
 watch(translateLength, (v) => {
   menuEl.value.scrollLeft = v
@@ -369,6 +371,10 @@ const unwatch = watch(translateLength, (v) => {
   isShowWheelTip.value = false
   unwatch()
 })
+
+onBeforeUnmount(() => {
+  store.commit('setScrollPosInPaintingListPage', translateLength.value)
+})
 </script>
 
 <style lang="less" scoped>