This commit is contained in:
zilong 2021-11-06 12:07:41 +08:00
parent f0e5ea4363
commit d70bf6738e
6 changed files with 63 additions and 27 deletions

View File

@ -130,6 +130,11 @@ const hideWins = (e) => {
showSearch.value = false; showSearch.value = false;
} }
}; };
const keyup = (e) => {
console.log(e);
}
</script> </script>
<template> <template>
@ -152,9 +157,9 @@ const hideWins = (e) => {
</div> </div>
<div id="main"> <div id="main">
<router-view v-slot="{ Component, route }"> <router-view v-slot="{ Component, route }">
<!-- <keep-alive exclude="FM,Friends"> --> <keep-alive exclude="FM,Friends">
<component :is="Component" /> <component :is="Component" />
<!-- </keep-alive> --> </keep-alive>
</router-view> </router-view>
<!-- <router-view v-slot="{ Component, route }"> <!-- <router-view v-slot="{ Component, route }">
<keep-alive v-if="route.meta.keepAlive"> <keep-alive v-if="route.meta.keepAlive">
@ -211,6 +216,7 @@ body {
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
// scroll-behavior: smooth;
} }
.top-menu { .top-menu {

View File

@ -4,7 +4,7 @@ import { useStore } from "vuex";
//设置 //设置
let config = { let config = {
elName: "mainContent", //#元素名称 elName: "mainContent", //#元素名称
log: false, //是否显示log log: true, //是否显示log
}; };
const backSnaps = []; //返回快照数组 const backSnaps = []; //返回快照数组
@ -25,9 +25,13 @@ export function cfg(cfg){
export function useBackSnaps() { export function useBackSnaps() {
onActivated(() => { onActivated(() => {
if (config.log)
console.log("useBackSnaps: onActivated事件", backSnaps);
restore(); restore();
}); });
onMounted(() => { onMounted(() => {
if (config.log)
console.log("useBackSnaps: onMounted", backSnaps);
restore(); restore();
}); });
@ -60,10 +64,11 @@ export const saveBackSnaps = () => {
//保存 //保存
if (idx > -1) { if (idx > -1) {
const backSnap = { const backSnap = {
idx, _idx: idx,
scrollTop: $content ? $content.scrollTop : 0, scrollTop: $content ? $content.scrollTop : 0,
}; };
// console.log("路由afterEach: ", backSnap); if (config.log)
console.log("useBackSnaps: 保存之前",backSnap, backSnaps)
if (backSnaps.length < idx + 1) backSnaps.length = idx + 1; if (backSnaps.length < idx + 1) backSnaps.length = idx + 1;
backSnaps[idx] = backSnaps[idx] ? {...backSnaps[idx], ...backSnap} : backSnap backSnaps[idx] = backSnaps[idx] ? {...backSnaps[idx], ...backSnap} : backSnap
// backSnaps[idx] = backSnap; // backSnaps[idx] = backSnap;
@ -81,8 +86,10 @@ export const saveSnap = (snap)=>{
// url: window.location.href, // url: window.location.href,
// }; // };
// // console.log("路由afterEach: ", backSnap); // // console.log("路由afterEach: ", backSnap);
if (config.log)
console.log("useBackSnaps: 保存当前页面",snap, backSnaps);
if (backSnaps.length < idx + 1) backSnaps.length = idx + 1; if (backSnaps.length < idx + 1) backSnaps.length = idx + 1;
backSnaps[idx] = backSnaps[idx] ? {...backSnaps[idx], ...{other: snap}} : {other: snap} backSnaps[idx] = backSnaps[idx] ? {...backSnaps[idx], ...snap} : {...snap}
// backSnaps[idx] = backSnap; // backSnaps[idx] = backSnap;
if (config.log) if (config.log)
console.log("useBackSnaps: 保存当前页面", backSnaps); console.log("useBackSnaps: 保存当前页面", backSnaps);

View File

@ -32,9 +32,8 @@ const snap = {
page: 1, page: 1,
pageSize: 50, pageSize: 50,
}, },
...getSnap()?.other, ...getSnap(),
}; };
console.log(snap);
const Songlist = defineAsyncComponent(() => const Songlist = defineAsyncComponent(() =>
import("@/components/Songlist.vue") import("@/components/Songlist.vue")
@ -72,6 +71,7 @@ watch(
() => [props.keywords, type.value, page.value, pageSize.value], () => [props.keywords, type.value, page.value, pageSize.value],
([k, t]) => { ([k, t]) => {
keywords.value = k; keywords.value = k;
// console.log('Searching...', keywords.value, type.value, page.value, pageSize.value);
search(); search();
} }
// { immediate: true } // { immediate: true }
@ -81,9 +81,14 @@ onMounted(() => {
search(); search();
}); });
let firstTime = true; // let firstTime = true;
// onActivated(()=>{
// console.log('actived---------');
// firstTime = true
// })
const search = () => { const search = () => {
// console.log('Searching...', keywords.value, type.value, page.value, pageSize.value);
switch (type.value) { switch (type.value) {
case 10: case 10:
things.value = "专辑"; things.value = "专辑";
@ -147,13 +152,10 @@ const search = () => {
if (page.value > maxPage) page.value = maxPage; if (page.value > maxPage) page.value = maxPage;
if (page.value < 1) page.value = 1; if (page.value < 1) page.value = 1;
if (firstTime) { setTimeout(() => {
setTimeout(() => { console.log(getScrollTop());
console.log(getScrollTop()); elWp.value.scrollTop = getScrollTop();
elWp.value.scrollTop = getScrollTop(); }, 50);
}, 100);
firstTime = false;
} else elWp.value.scrollTop = 0;
saveSnap({ saveSnap({
type: type.value, type: type.value,
@ -194,6 +196,11 @@ const click = () => {
console.log(elWp.value.scrollTop); console.log(elWp.value.scrollTop);
window.history.pushState(null, null); window.history.pushState(null, null);
}; };
const pageChange = (p) => {
page.value = p;
saveSnap({ scrollTop: 0 });
};
</script> </script>
<template> <template>
@ -231,35 +238,50 @@ const click = () => {
<span <span
class="caption" class="caption"
:style="selStyle('10')" :style="selStyle('10')"
@click="type = 10;page=1;" @click="
type = 10;
page = 1;
"
> >
专辑 专辑
</span> </span>
<span <span
class="caption" class="caption"
:style="selStyle('1000')" :style="selStyle('1000')"
@click="type = 1000;page=1;" @click="
type = 1000;
page = 1;
"
> >
歌单 歌单
</span> </span>
<span <span
class="caption" class="caption"
:style="selStyle('1009')" :style="selStyle('1009')"
@click="type = 1009;page=1;" @click="
type = 1009;
page = 1;
"
> >
电台 电台
</span> </span>
<span <span
class="caption" class="caption"
:style="selStyle('1004')" :style="selStyle('1004')"
@click="type = 1004;page=1;" @click="
type = 1004;
page = 1;
"
> >
MV MV
</span> </span>
<span <span
class="caption" class="caption"
:style="selStyle('1014')" :style="selStyle('1014')"
@click="type = 1014;page=1;" @click="
type = 1014;
page = 1;
"
> >
视频 视频
</span> </span>
@ -298,9 +320,10 @@ const click = () => {
<div class="panel" v-show="type == 1000"></div> <div class="panel" v-show="type == 1000"></div>
</div> </div>
<div class="pager"> <div class="pager">
<NPagination <NPagination v-show="count>0"
v-model:page="page" v-model:page="page"
:page-count="Math.ceil(count / pageSize)" :page-count="Math.ceil(count / pageSize)"
:on-update:page="pageChange"
/> />
</div> </div>
</div> </div>

View File

@ -14,7 +14,7 @@ const keywords = ref("");
const elSearch = ref(null); const elSearch = ref(null);
const search = () => { const search = () => {
if (keywords.value.length > 0){ if (keywords.value.trim().length > 0){
pubsub.publish("zp.toggleSearch"); pubsub.publish("zp.toggleSearch");
// elSearch.value.blur() // elSearch.value.blur()
store.commit('addSearchHistory', keywords.value) store.commit('addSearchHistory', keywords.value)

View File

@ -50,7 +50,7 @@ const keywords = ref("");
const token = pubsub.subscribe("zp", (msg, data) => { const token = pubsub.subscribe("zp", (msg, data) => {
switch (msg) { switch (msg) {
case "zp.searchInput": case "zp.searchInput":
keywords.value = data; keywords.value = data.trim();
suggest(keywords.value); suggest(keywords.value);
break; break;
} }

View File

@ -211,14 +211,14 @@ export default {};
align-items: center; align-items: center;
.song-name { .song-name {
// flex: 1; // flex: 1;
.text-el-line-normal(); .text-el-line();
} }
.song-author { .song-author {
// flex: 1; // flex: 1;
margin-left: 4px; margin-left: 4px;
color: #aaa; color: #aaa;
font-size: 13px; font-size: 13px;
.text-el-line-normal(); .text-el-line();
} }
} }
.song-time { .song-time {