国之重器列表页 排版与自动滚动、记忆并恢复滚动位置

src/store/index.js

@@ -2,13 +2,13 @@ import { createStore } from 'vuex'
 
 export default createStore({
   state: {
-    usingChinese: true,
+    treasureListScrollLeft: 0,
   },
   getters: {
   },
   mutations: {
-    setUsingChinese(state, value) {
-      state.usingChinese = value
+    setTreasureListScrollLeft(state, value) {
+      state.treasureListScrollLeft = value
     },
   },
   actions: {

src/views/Treasure.vue

@@ -15,6 +15,10 @@
         v-for="item in treasureList.value"
         :key="item.id"
         class="cover grid-item"
+        :class="{
+          tall: item.thumbInfo <= 1,
+          fat: item.thumbInfo > 1,
+        }"
         @click="!isDragged && $router.push({name: 'TreasureDetail', query: {id: item.id}})"
       >
         <img
@@ -43,15 +47,22 @@ export default {
 
 <script setup>
 import {
+  onBeforeMount,
+  onBeforeUnmount,
   onMounted,
+  onUnmounted,
   reactive,
   ref,
   toRefs,
+  watch,
 } from 'vue'
 import { ElLoading } from 'element-plus'
+import { useStore } from 'vuex'
 
 const prefix = process.env.VUE_APP_API_ORIGIN
 
+const store = useStore()
+
 // 滑动功能
 let isMouseDown = false
 let isDragged = false
@@ -91,12 +102,58 @@ onMounted(() => {
         // gutter: 10,
       }
     })
-  }, 500)
+  }, 600)
+})
+
+/**
+ * 自动滚动相关
+ */
+const isAutoScrolling = ref(false)
+let planScrollTimer = null
+function operationStartCb() {
+  clearTimeout(planScrollTimer)
+  isAutoScrolling.value = false
+}
+function operationEndCb(e) {
+  clearTimeout(planScrollTimer)
+  planScrollTimer = setTimeout(() => {
+    isAutoScrolling.value = true
+  }, 10000)
+}
+let scrollInterval = null
+watch(isAutoScrolling, (vNew) => {
+  if (vNew) {
+    const gridEl = document.getElementsByClassName('grid')[0]
+    const wrapperEl = gridEl.parentNode
+    scrollInterval = setInterval(() => {
+      wrapperEl.scrollLeft += 1
+    }, 40)
+  } else {
+    clearInterval(scrollInterval)
+  }
+})
+onMounted(() => {
+  operationEndCb()
+  document.addEventListener('mousedown', operationStartCb)
+  document.addEventListener('touchstart', operationStartCb)
+  document.addEventListener('keydown', operationStartCb)
+  document.addEventListener('mouseup', operationEndCb)
+  document.addEventListener('touchend', operationEndCb)
+  document.addEventListener('keyup', operationEndCb)
+})
+onUnmounted(() => {
+  clearTimeout(planScrollTimer)
+  clearInterval(scrollInterval)
+  document.removeEventListener('mousedown', operationStartCb)
+  document.removeEventListener('touchstart', operationStartCb)
+  document.removeEventListener('keydown', operationStartCb)
+  document.removeEventListener('mouseup', operationEndCb)
+  document.removeEventListener('touchend', operationEndCb)
+  document.removeEventListener('keyup', operationEndCb)
 })
 
 // mask相关
 const isShowLoadingMask = ref(true)
-
 onMounted(() => {
   const loadingInstance = ElLoading.service({
     background: 'transparent',
@@ -113,7 +170,23 @@ onMounted(() => {
     // })
     isShowLoadingMask.value = false
     loadingInstance.close()
-  }, 666)
+  }, 600)
+})
+
+// 滚动位置记忆相关
+onMounted(() => {
+  if (store.state.treasureListScrollLeft) {
+    setTimeout(() => {
+      const gridEl = document.getElementsByClassName('grid')[0]
+      const wrapperEl = gridEl.parentNode
+      wrapperEl.scrollLeft = store.state.treasureListScrollLeft
+    }, 600)
+  }
+})
+onBeforeUnmount(() => {
+  const gridEl = document.getElementsByClassName('grid')[0]
+  const wrapperEl = gridEl.parentNode
+  store.commit('setTreasureListScrollLeft', wrapperEl.scrollLeft)
 })
 </script>
 
@@ -141,9 +214,14 @@ onMounted(() => {
       border: 5px solid #000;
       font-size: 0; // 令strut高度为0
       cursor: pointer;
-      min-width: 100px;
-      min-height: 100px;
-      max-height: 100%;
+      &.tall {
+        height: 400px;
+        width: auto;
+      }
+      &.fat {
+        height: 200px;
+        width: auto;
+      }
       > img {
         width: 100%;
         height: 100%;