比较完美完成返回滚动实现
This commit is contained in:
zilong
@@ -1,32 +1,76 @@
|
||||
<script setup>
|
||||
import { ref, onActivated, watch, onMounted } from "vue";
|
||||
import {
|
||||
ref,
|
||||
toRefs,
|
||||
onActivated,
|
||||
watch,
|
||||
onMounted,
|
||||
nextTick,
|
||||
defineAsyncComponent,
|
||||
onDeactivated,
|
||||
onUnmounted,
|
||||
} from "vue";
|
||||
import { searchResult } from "../network/search";
|
||||
import Songlist from "../components/Songlist.vue";
|
||||
import SongsList from "../components/SongsList.vue";
|
||||
import { useStore } from "vuex";
|
||||
import { NPagination } from "naive-ui";
|
||||
import { c, NPagination } from "naive-ui";
|
||||
import pubsub from "pubsub-js";
|
||||
import Artistlist from "../components/Artistlist.vue";
|
||||
import { get } from "lodash";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
//使用useBackSnaps恢复滚动条位置
|
||||
import {
|
||||
useBackSnaps,
|
||||
getScrollTop,
|
||||
saveSnap,
|
||||
getSnap,
|
||||
} from "@/lib/useBackSnaps";
|
||||
useBackSnaps();
|
||||
const snap = {
|
||||
...{
|
||||
type: 1,
|
||||
page: 1,
|
||||
pageSize: 50,
|
||||
},
|
||||
...getSnap()?.other,
|
||||
};
|
||||
console.log(snap);
|
||||
|
||||
const Songlist = defineAsyncComponent(() =>
|
||||
import("@/components/Songlist.vue")
|
||||
);
|
||||
|
||||
const props = defineProps({
|
||||
type: String,
|
||||
keywords: String,
|
||||
});
|
||||
|
||||
const store = useStore();
|
||||
const route = useRoute();
|
||||
|
||||
onActivated(() => {});
|
||||
|
||||
const type = ref(props.type);
|
||||
// const type = ref(getSnap('type', 1));
|
||||
const type = ref(snap.type);
|
||||
const page = ref(snap.page);
|
||||
const pageSize = ref(snap.pageSize);
|
||||
const keywords = ref(props.keywords);
|
||||
|
||||
// type.value=snap.type
|
||||
// page.value=snap.page
|
||||
// pageSize.value=snap.pageSize
|
||||
|
||||
const count = ref(0);
|
||||
const page = ref(1);
|
||||
const pageSize = ref(50);
|
||||
const things = ref("单曲");
|
||||
const elWp = ref(null);
|
||||
const songs = ref([]);
|
||||
const artists = ref([]);
|
||||
const albums = ref([]);
|
||||
const playlists = ref([]);
|
||||
const djRadios = ref([]);
|
||||
const mvs = ref([]);
|
||||
const videos = ref([]);
|
||||
|
||||
watch(
|
||||
() => [props.type, props.keywords, page.value, pageSize.value],
|
||||
([t, k]) => {
|
||||
type.value = t;
|
||||
() => [props.keywords, type.value, page.value, pageSize.value],
|
||||
([k, t]) => {
|
||||
keywords.value = k;
|
||||
search();
|
||||
}
|
||||
@@ -37,11 +81,30 @@ onMounted(() => {
|
||||
search();
|
||||
});
|
||||
|
||||
let firstTime = true;
|
||||
|
||||
const search = () => {
|
||||
switch (type.value) {
|
||||
case "1":
|
||||
case 10:
|
||||
things.value = "专辑";
|
||||
break;
|
||||
case 100:
|
||||
things.value = "歌手";
|
||||
break;
|
||||
case 1000:
|
||||
things.value = "歌单";
|
||||
break;
|
||||
case 1009:
|
||||
things.value = "电台";
|
||||
break;
|
||||
case 1004:
|
||||
things.value = "MV";
|
||||
break;
|
||||
case 1014:
|
||||
things.value = "视频";
|
||||
break;
|
||||
case 1:
|
||||
default:
|
||||
type.value = "1";
|
||||
things.value = "单曲";
|
||||
break;
|
||||
}
|
||||
@@ -58,8 +121,45 @@ const search = () => {
|
||||
if (type.value == 1) {
|
||||
count.value = res.data.result.songCount;
|
||||
songs.value = res.data.result.songs;
|
||||
console.log(songs.value);
|
||||
} else if (type.value == 100) {
|
||||
count.value = res.data.result.artistCount;
|
||||
artists.value = res.data.result.artists;
|
||||
} else if (type.value == 10) {
|
||||
count.value = res.data.result.albumCount;
|
||||
albums.value = res.data.result.albums;
|
||||
} else if (type.value == 1000) {
|
||||
count.value = res.data.result.playlistCount;
|
||||
playlists.value = res.data.result.playlists;
|
||||
} else if (type.value == 1009) {
|
||||
count.value = res.data.result.djRadiosCount;
|
||||
djRadios.value = res.data.result.djRadios;
|
||||
} else if (type.value == 1004) {
|
||||
count.value = res.data.result.mvCount;
|
||||
mvs.value = res.data.result.mvs;
|
||||
} else if (type.value == 1014) {
|
||||
count.value = res.data.result.videoCount;
|
||||
videos.value = res.data.result.videos;
|
||||
}
|
||||
|
||||
//判断分页情况
|
||||
const maxPage = Math.ceil(count.value / pageSize.value);
|
||||
// console.log('maxPage:' ,count.value, maxPage);
|
||||
if (page.value > maxPage) page.value = maxPage;
|
||||
if (page.value < 1) page.value = 1;
|
||||
|
||||
if (firstTime) {
|
||||
setTimeout(() => {
|
||||
console.log(getScrollTop());
|
||||
elWp.value.scrollTop = getScrollTop();
|
||||
}, 100);
|
||||
firstTime = false;
|
||||
} else elWp.value.scrollTop = 0;
|
||||
|
||||
saveSnap({
|
||||
type: type.value,
|
||||
page: page.value,
|
||||
pageSize: pageSize.value,
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
@@ -77,47 +177,125 @@ const selStyle = (t) => {
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const songMenu = [
|
||||
{
|
||||
label: "播放",
|
||||
key: "play",
|
||||
},
|
||||
// {
|
||||
// label: "下一首播放",
|
||||
// key: "nextToPlay",
|
||||
// },
|
||||
];
|
||||
|
||||
const click = () => {
|
||||
// console.log("ctxMenuClick");
|
||||
console.log(elWp.value.scrollTop);
|
||||
window.history.pushState(null, null);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main-content">
|
||||
<div id="mainContent" class="main-content" ref="elWp">
|
||||
<div class="lmt-width">
|
||||
<div class="title">
|
||||
{{ keywords }}
|
||||
<span class="result">找到 {{ count }} {{ things }}</span>
|
||||
</div>
|
||||
<!-- <button @click="click" style="z-index: 1000">btn</button> -->
|
||||
|
||||
<div class="tabs">
|
||||
<div class="tab">
|
||||
<div class="btns">
|
||||
<span class="caption" :style="selStyle('1')"> 单曲 </span>
|
||||
<span class="caption" :style="selStyle('10')">
|
||||
专辑
|
||||
<span
|
||||
class="caption"
|
||||
:style="selStyle('1')"
|
||||
@click="
|
||||
type = 1;
|
||||
page = 1;
|
||||
"
|
||||
>
|
||||
单曲
|
||||
</span>
|
||||
<span class="caption" :style="selStyle('100')">
|
||||
<span
|
||||
class="caption"
|
||||
:style="selStyle('100')"
|
||||
@click="
|
||||
type = 100;
|
||||
page = 1;
|
||||
"
|
||||
>
|
||||
歌手
|
||||
</span>
|
||||
<span class="caption" :style="selStyle('1000')">
|
||||
<span
|
||||
class="caption"
|
||||
:style="selStyle('10')"
|
||||
@click="type = 10;page=1;"
|
||||
>
|
||||
专辑
|
||||
</span>
|
||||
<span
|
||||
class="caption"
|
||||
:style="selStyle('1000')"
|
||||
@click="type = 1000;page=1;"
|
||||
>
|
||||
歌单
|
||||
</span>
|
||||
<span class="caption" :style="selStyle('1009')">
|
||||
<span
|
||||
class="caption"
|
||||
:style="selStyle('1009')"
|
||||
@click="type = 1009;page=1;"
|
||||
>
|
||||
电台
|
||||
</span>
|
||||
<span class="caption" :style="selStyle('1004')">
|
||||
<span
|
||||
class="caption"
|
||||
:style="selStyle('1004')"
|
||||
@click="type = 1004;page=1;"
|
||||
>
|
||||
MV
|
||||
</span>
|
||||
<span class="caption" :style="selStyle('1014')">
|
||||
<span
|
||||
class="caption"
|
||||
:style="selStyle('1014')"
|
||||
@click="type = 1014;page=1;"
|
||||
>
|
||||
视频
|
||||
</span>
|
||||
</div>
|
||||
<div class="bt"></div>
|
||||
</div>
|
||||
<div class="panel" v-show="type == '1'">
|
||||
<Songlist :songs="songs"></Songlist>
|
||||
<div class="panel" v-show="type == 1">
|
||||
<Songlist
|
||||
:songs="songs"
|
||||
:ctxMenu="songMenu"
|
||||
@ctxMenuSelect="
|
||||
(key, id) => {
|
||||
switch (key) {
|
||||
case 'play':
|
||||
pubsub.publish('zp.play', {
|
||||
id,
|
||||
im: true,
|
||||
});
|
||||
break;
|
||||
case 'nextToPlay':
|
||||
break;
|
||||
}
|
||||
}
|
||||
"
|
||||
@itemDbclick="
|
||||
(id) => {
|
||||
pubsub.publish('zp.play', { id, im: true });
|
||||
}
|
||||
"
|
||||
></Songlist>
|
||||
</div>
|
||||
<div class="panel" v-show="type == '10'"></div>
|
||||
<div class="panel" v-show="type == '100'"></div>
|
||||
<div class="panel" v-show="type == '1000'"></div>
|
||||
<div class="panel" v-show="type == 10"></div>
|
||||
<div class="panel" v-show="type == 100">
|
||||
<Artistlist :artists="artists" />
|
||||
</div>
|
||||
<div class="panel" v-show="type == 1000"></div>
|
||||
</div>
|
||||
<div class="pager">
|
||||
<NPagination
|
||||
@@ -130,7 +308,9 @@ const selStyle = (t) => {
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
export default {
|
||||
name: "SearchResult",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -156,6 +336,7 @@ export default {};
|
||||
margin-right: 16px;
|
||||
color: #666;
|
||||
border-bottom: solid 2px #f0f0f0;
|
||||
cursor: pointer;
|
||||
}
|
||||
// .sel {
|
||||
// color: red;
|
||||
@@ -170,7 +351,7 @@ export default {};
|
||||
}
|
||||
}
|
||||
|
||||
.pager{
|
||||
.pager {
|
||||
margin: 18px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
Reference in New Issue
Block a user