人生啊人生 6 天之前
父节点
当前提交
a5583cbd4c
共有 1 个文件被更改,包括 64 次插入3 次删除
  1. 64 3
      src/components/WindowQingXiCheAndQv/WindowMenu.vue

+ 64 - 3
src/components/WindowQingXiCheAndQv/WindowMenu.vue

@@ -1,9 +1,70 @@
 <script setup>
 import dayjs from "dayjs";
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { WindowMenuStore } from "@/components/WindowQingXiCheAndQv/store/WindowMenuStore.js";
 import { ComVal } from "../ThreeWorldEventQingXiCheAndQv/common/ComVal.js";
 
+let objMainContent = ref(null);
+
+watch(
+    () => WindowMenuStore().obj.index,
+    (newVal, oldVal) => {
+
+        console.log("WindowMenuStore().obj.index ---", WindowMenuStore().obj.index);
+
+        objMainContentEvent();
+
+    }
+);
+
+
+const objMainContentEvent = () => {
+
+    setTimeout(function() {
+
+        // console.log("objMainContent", objMainContent);
+        let objHtml = objMainContent.value;
+        let divAll = objHtml.getElementsByTagName("div");
+
+        // 找到最后出现的完成对象
+        let obj = null;
+
+        for (let i = 0; i < divAll.length; i++) {
+            let objDiv = divAll[i];
+            let className = objDiv.className;
+            
+            if (className.indexOf("oneYes") >= 0) {
+                obj = objDiv.parentNode;
+            }
+        }
+
+        if (obj != null && obj != undefined) {
+
+            // 获取容器的当前滚动轴
+            let scrollTop = objHtml.scrollTop;
+            // 容器坐标
+            let scrollTopY = objHtml.getBoundingClientRect().top;
+            // 获取当前对象的所在容器的坐标
+            let scrollTopObj =  obj.getBoundingClientRect().top;
+
+            // 通过坐标差和滚动的结果,得到真实的 Y 坐标
+            let newY = scrollTopObj + scrollTop - scrollTopY;
+
+            // 滚动调自动滚动到对应的选中位置
+            objHtml.scrollTop = newY;
+
+        }
+
+
+    }, 500);
+    
+}
+
+
+onMounted(() => {
+    objMainContentEvent();
+});
+
 </script>
 
 <template>
@@ -11,13 +72,13 @@ import { ComVal } from "../ThreeWorldEventQingXiCheAndQv/common/ComVal.js";
         
         <div class="main">
             <div class="title" >任务提示</div>
-            <div class="content commonsScrollbar" >
+            <div ref="objMainContent" class="content commonsScrollbar" >
 
                 <div v-for="(item, index) of WindowMenuStore().obj.list" :key="index" >
                     
                     <div :class="'list ' + (index == WindowMenuStore().obj.index ? 'listBg' : '' )" >
                         
-                        <div class="one">
+                        <div :class="'one ' + ( index < WindowMenuStore().obj.index ? 'oneYes' : '')">
                             <img v-if="index < WindowMenuStore().obj.index" class="selectImg" src="./img/menu/yes.webp" />
                         </div>
                         <div class="two" >