From a5bd38714531ebd7c6d3331d1bb837b863c6c84f Mon Sep 17 00:00:00 2001
From: Xwite <1797350009@qq.com>
Date: Thu, 11 May 2023 13:20:19 +0800
Subject: [PATCH] =?UTF-8?q?web:=20=E4=BC=98=E5=8C=96=E7=9B=AE=E5=BD=95?=
 =?UTF-8?q?=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 modules/web/src/components/PopCatalog.vue | 32 +++++++++++------------
 modules/web/src/views/BookChapter.vue     |  2 --
 2 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/modules/web/src/components/PopCatalog.vue b/modules/web/src/components/PopCatalog.vue
index 65ba2ab9b..c440f29ef 100644
--- a/modules/web/src/components/PopCatalog.vue
+++ b/modules/web/src/components/PopCatalog.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="cata-wrapper" :style="popupTheme">
+  <div
+    :class="{ 'cata-wrapper': true, visible: popCataVisible }"
+    :style="popupTheme"
+  >
     <div class="title">目录</div>
     <virtual-list
       style="height: 300px; overflow: auto"
@@ -53,23 +56,13 @@ const virtualListdata = computed(() => {
   while (i < length) {
     virtualListDataSource[i] = {
       index: i,
-      catas: catalogValue.slice(2 * i, 2 * i + 2)
-    }
+      catas: catalogValue.slice(2 * i, 2 * i + 2),
+    };
     i++;
   }
   return virtualListDataSource;
 });
 
-const virtualListRef = ref();
-const virtualListIndex = computed(() => {
-  if (miniInterface.value) return index.value;
-  return Math.floor(index.value / 2);
-});
-watch(popCataVisible, (visible) => {
-  if (visible) return; // 页面可见时，虚拟列表内部sizes Map全为0
-  nextTick(() => virtualListRef.value.scrollToIndex(virtualListIndex.value));
-});
-
 const emit = defineEmits(["getContent"]);
 const gotoChapter = (note) => {
   index.value = catalog.value.indexOf(note);
@@ -77,11 +70,16 @@ const gotoChapter = (note) => {
   store.setContentLoading(true);
   emit("getContent", index.value);
 };
+
+const virtualListRef = ref();
+const virtualListIndex = computed(() => {
+  if (miniInterface.value) return index.value;
+  return Math.floor(index.value / 2);
+});
+
 onUpdated(() => {
-  // catalog变化触发dom更新和ResizeObserver，更新虚拟列表内部的sizes Map
-  store.popCataVisible = false;
-  // 触发popCataVisible watcher
-  // virtualListRef.value.scrollToIndex(index.value)
+  // dom更新触发ResizeObserver，更新虚拟列表内部的sizes Map
+  virtualListRef.value.scrollToIndex(virtualListIndex.value);
 });
 </script>
 
diff --git a/modules/web/src/views/BookChapter.vue b/modules/web/src/views/BookChapter.vue
index b37b8d50d..665c1fd52 100644
--- a/modules/web/src/views/BookChapter.vue
+++ b/modules/web/src/views/BookChapter.vue
@@ -520,8 +520,6 @@ onMounted(() => {
       let data = res.data.data;
       store.setCatalog(data);
       store.setReadingBook(book);
-      // 目录使用虚拟列表显示，需要手动显示一次以便滚动到当前位置
-      store.popCataVisible = true;
 
       getContent(chapterIndex, true, chapterPos);
       window.addEventListener("keyup", handleKeyPress);