比较完美完成返回滚动实现

src/components/Albumlist.vue

@@ -0,0 +1,16 @@
+<script setup>
+
+</script>
+<template>
+  
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/components/Artistlist.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { NAvatar } from 'naive-ui';
+
+const props = defineProps({
+  artists: Array,
+})
+</script>
+<template>
+  <table class="arList">
+    <tr v-for="(ar) in artists" :key="ar.idx" @click="$router.push('/singer/'+ar.id)">
+      <td class="img" >
+        <NAvatar :size="60" :src="ar.picUrl" object-fit="cover"></NAvatar>
+        <!-- <img :src="ar.picUrl" alt="歌手头像" width="100"> -->
+      </td>
+      <td class="content">
+        <span class="name">{{ar.name}}</span> 
+        <span class="alias">
+          {{ar.alias.length > 0 ? '（' + ar.alias.join(' ') + '）' : ''}}
+        </span>
+        </td>
+      <td class="others"></td>
+    </tr>
+  </table>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="less" scoped>
+@import "@/assets/css/common.less";
+.arList{
+  margin-top: 6px;
+  border-spacing: 0;
+
+  tr{
+    cursor: pointer;
+
+      .content{
+    .name{
+      padding: 6px;
+    }
+    .alias{
+      font-size: 14px;
+      color: #999;
+    }
+  }
+  }
+
+}
+
+
+</style>

src/components/Songlist.vue

@@ -1,31 +1,14 @@
 <script setup>
 import {
   ref,
-  reactive,
-  h,
-  watch,
-  toRaw,
-  onMounted,
-  onUnmounted,
-  nextTick,
 } from "vue";
-import { RouterLink, useRoute, useRouter } from "vue-router";
+import { useRouter } from "vue-router";
 import { useStore } from "vuex";
 import {
   NButton,
-  NButtonGroup,
-  NSpace,
   NIcon,
   NDropdown,
   NMenu,
-  NLayout,
-  NLayoutHeader,
-  NLayoutFooter,
-  NLayoutContent,
-  NLayoutSider,
-  NTag,
-  NDataTable,
-  useMessage,
 } from "naive-ui";
 import Play from "@/assets/svgs/Play_.svg";
 import Pause from "@/assets/svgs/Pause.svg";
@@ -42,8 +25,24 @@ const router = useRouter();
 dayjs.extend(duration);
 
 const props = defineProps({
-  songs: Array,
+  songs: Array, // 歌曲列表
+  ctxMenu: Array, //菜单
+  showHead: {
+    type: Boolean,
+    default: true,
+  }
 });
+const emit = defineEmits({
+  itemDbclick: null, // 双击每行
+  ctxMenuSelect: null, // 点击菜单
+})
+
+const ctxMenuOptions = ()=>{
+  return (props.ctxMenu ? props.ctxMenu : [])
+}
+const onCtxMenuSelect = (key, id) => {
+  props.ctxMenuSelect?.(key, id)
+}
 
 // const s = ref(props.songs)
 // console.log(s.value.value);
@@ -107,7 +106,7 @@ const props = defineProps({
     </div>
   </div>
   <table class="tbList">
-    <tr class="tr trh">
+    <tr class="tr trh" v-show="showHead">
       <td class="icon"></td>
       <td class="name">音乐标题</td>
       <td class="ar">歌手</td>
@@ -120,7 +119,7 @@ const props = defineProps({
       v-for="p in songs"
       :key="p.id"
       draggable="false"
-      @dblclick="pubsub.publish('zp.play', { id: p.id, im: true })"
+      @dblclick="$emit('itemDbclick', p.id)"
     >
       <td class="icon">
         <NButton
@@ -139,10 +138,12 @@ const props = defineProps({
         <span class="ntext">{{ p.name }}</span>
         <span class="nm">
           <n-dropdown
+            v-if="ctxMenuOptions().length > 0"
             placement="right-start"
-            @select="handleSelect($event, p.id)"
+            @select="$emit('ctxMenuSelect', $event, p.id)"
             trigger="click"
             :show-arrow="true"
+            :options="(ctxMenuOptions())"
           >
             <NButton
               class="mn"
@@ -207,7 +208,7 @@ export default {
     }
 
     &:hover {
-      background-color: #eee;
+      // background-color: #eee;
 
       .name .mn {
         display: block;