首页博物馆列表sidebar点击功能

code/src/views/home/aside.vue

@@ -17,7 +17,7 @@
       <section>
         <ul v-if="list.length > 0">
           <li v-for="(sub, idx) in list" :key="idx">
-            <p>{{ sub.type }}</p>
+            <p :id="'aside-list-sidebar-' + sub.type">{{ sub.type }}</p>
             <ul v-if="sub.arr.length > 0">
               <li @click="onClickItem(son)" v-for="(son, sonidx) in sub.arr" :key="sonidx">
                 {{ son.name }}
@@ -29,7 +29,7 @@
 
       <div class="sidebar">
         <ul>
-          <li v-for="(item, i) in charStrs" :key="i">
+          <li v-for="(item, i) in charStrs" :key="i" @click="onClickSidebarItem(item)">
             {{ item }}
           </li>
         </ul>
@@ -65,6 +65,12 @@ const onClickSelect = (data) => {
   isShow.value = true
   currentId.value = data.id
 }
+const onClickSidebarItem = (item) => {
+  const targetNode = document.getElementById('aside-list-sidebar-' + item)
+  if (targetNode) {
+    targetNode.scrollIntoView()
+  }
+}
 
 const searchkey = ref('')