Просмотр исходного кода

从详情页返回文物列表页时,自动恢复滚动条位置

(cherry picked from commit 90dadb74354f823d502b3383ab1366898ddd7548)
(cherry picked from commit 2c8bdd2fcae79fcfd04d89740ebd778c3bfd3810)
(cherry picked from commit 198f4448ff1c5afabcf5b5e8304ddabaadc534c6)
任一存 2 лет назад
Родитель
Сommit
85920bc4ca
2 измененных файлов с 14 добавлено и 2 удалено
  1. 5 1
      src/store/index.js
  2. 9 1
      src/views/RelicList.vue

+ 5 - 1
src/store/index.js

@@ -2,13 +2,17 @@ import { createStore } from 'vuex'
 
 export default createStore({
   state: {
-    data: null
+    data: null,
+    relicListScrollValue: 0,
   },
   getters: {
   },
   mutations: {
     setData(state, data) {
       state.data = data
+    },
+    recordRelicListScrollValue(state, value) {
+      state.relicListScrollValue = value
     }
   },
   actions: {

+ 9 - 1
src/views/RelicList.vue

@@ -29,6 +29,7 @@
       ref="relicListEl"
       class="relic-ul"
       @wheel="onRelicListWheel"
+      @scroll="onRelicListScroll"
     >
       <li
         v-for="(item, idx) in unitInfo?.list"
@@ -65,7 +66,7 @@
 
 <script setup>
 import { useRoute, useRouter } from "vue-router"
-import { ref, computed, inject } from "vue"
+import { ref, computed, inject, watch, onMounted } from "vue"
 import { useStore } from "vuex"
 import { numberToWords } from "pixiu-number-toolkit"
 const {
@@ -93,6 +94,13 @@ function onRelicListWheel(e) {
   relicListEl.value.scrollLeft -= e.wheelDelta
 }
 
+function onRelicListScroll() {
+  store.commit('recordRelicListScrollValue', relicListEl.value.scrollLeft)
+}
+onMounted(() => {
+  relicListEl.value.scrollLeft = store.state.relicListScrollValue
+})
+
 function onClickTabItem(idx) {
   router.push({
     name: route.name,