Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
0ed23f66 1 parent b1e04a42

✨ feat: 重写返回位置功能

Inline Side-by-side
Showing 6 changed files with 41 additions and 48 deletions
...@@ -12,6 +12,7 @@ export const mainStore = defineStore('main', { ...@@ -12,6 +12,7 @@ export const mainStore = defineStore('main', {
12 scrollTop: 0, 12 scrollTop: 0,
13 scrollTopCollection: 0, 13 scrollTopCollection: 0,
14 scrollTopLike: 0, 14 scrollTopLike: 0,
15 + scrollTopPerson: 0,
15 keepPages: 'default', // 很坑爹，空值全部都缓存 16 keepPages: 'default', // 很坑爹，空值全部都缓存
16 }; 17 };
17 }, 18 },
...@@ -39,6 +40,9 @@ export const mainStore = defineStore('main', { ...@@ -39,6 +40,9 @@ export const mainStore = defineStore('main', {
39 changeScrollTopLike (v) { 40 changeScrollTopLike (v) {
40 this.scrollTopLike = v; 41 this.scrollTopLike = v;
41 }, 42 },
43 + changeScrollTopPerson (v) {
44 + this.scrollTopPerson = v;
45 + },
42 changeKeepPages (page) { // 清空所有缓存，用一个不存在的值覆盖 46 changeKeepPages (page) { // 清空所有缓存，用一个不存在的值覆盖
43 this.keepPages = page; 47 this.keepPages = page;
44 }, 48 },
......
...@@ -316,24 +316,21 @@ onActivated(() => { // keepAlive 重置后执行回调 ...@@ -316,24 +316,21 @@ onActivated(() => { // keepAlive 重置后执行回调
316 $("html,body").animate({ "scrollTop": String(scrollTop.value) + 'px' }); 316 $("html,body").animate({ "scrollTop": String(scrollTop.value) + 'px' });
317 }); 317 });
318 318
319 - // 监听记录滚动位置
320 - window.addEventListener('scroll',()=>{
321 - if (window.scrollY) {
322 - store.changeScrollTop(window.scrollY)
323 - }
324 - });
325 -
326 // 更新页面名称，因为不刷新副作用~ 319 // 更新页面名称，因为不刷新副作用~
327 document.title = $route.meta.title; 320 document.title = $route.meta.title;
328 }); 321 });
329 322
330 -// 监听记录滚动位置 323 +const { scrollTop } = storeToRefs(store);
331 -window.addEventListener('scroll',()=>{ 324 +// 嵌套滚动，执行两个，先滚外面再滚里面
332 - if (window.scrollY) { 325 +_.times(2, () => {
333 - store.changeScrollTop(window.scrollY) 326 + $("html,body").animate({ "scrollTop": String(scrollTop.value) + 'px' });
334 - }
335 }); 327 });
336 328
329 +onBeforeRouteLeave(() => {
330 + // 监听记录滚动位置
331 + store.changeScrollTop(window.scrollY)
332 +})
333 +
337 /*********************************************************/ 334 /*********************************************************/
338 335
339 </script> 336 </script>
......
...@@ -140,6 +140,7 @@ const followUser = (status) => { ...@@ -140,6 +140,7 @@ const followUser = (status) => {
140 // TAG: keepAlive 缓存页面 140 // TAG: keepAlive 缓存页面
141 const store = mainStore(); 141 const store = mainStore();
142 store.keepThisPage($route.meta.name); 142 store.keepThisPage($route.meta.name);
143 +const scrollY = ref(0)
143 144
144 onActivated(() => { // keepAlive 重置后执行回调 145 onActivated(() => { // keepAlive 重置后执行回调
145 // TAG: pinia应用，动态刷新数据 146 // TAG: pinia应用，动态刷新数据
...@@ -156,27 +157,24 @@ onActivated(() => { // keepAlive 重置后执行回调 ...@@ -156,27 +157,24 @@ onActivated(() => { // keepAlive 重置后执行回调
156 // 触发更新 157 // 触发更新
157 userInfo.value.prod = arr.value; 158 userInfo.value.prod = arr.value;
158 159
159 - const { scrollTop } = storeToRefs(store); 160 + const { scrollTopPerson } = storeToRefs(store);
160 // 嵌套滚动，执行两个，先滚外面再滚里面 161 // 嵌套滚动，执行两个，先滚外面再滚里面
161 _.times(2, () => { 162 _.times(2, () => {
162 - $("html,body").animate({ "scrollTop": String(scrollTop.value) + 'px' }); 163 + $("html,body").animate({ "scrollTop": String(scrollTopPerson.value) + 'px' });
163 }); 164 });
164 165
165 - // 监听记录滚动位置
166 - window.addEventListener('scroll',()=>{
167 - if (window.scrollY) {
168 - store.changeScrollTop(window.scrollY)
169 - }
170 - });
171 }); 166 });
172 167
173 -// 监听记录滚动位置 168 +const { scrollTopPerson } = storeToRefs(store);
174 -window.addEventListener('scroll',()=>{ 169 +// 嵌套滚动，执行两个，先滚外面再滚里面
175 - if (window.scrollY) { 170 +_.times(2, () => {
176 - store.changeScrollTop(window.scrollY) 171 + $("html,body").animate({ "scrollTop": String(scrollTopPerson.value) + 'px' });
177 - }
178 }); 172 });
179 173
174 +onBeforeRouteLeave(() => {
175 + store.changeScrollTopPerson(window.scrollY)
176 +})
177 +
180 /*********************************************************/ 178 /*********************************************************/
181 179
182 </script> 180 </script>
......
...@@ -18,7 +18,7 @@ import Cookies from 'js-cookie' ...@@ -18,7 +18,7 @@ import Cookies from 'js-cookie'
18 import no_image from '@images/que-shuju@2x.png' 18 import no_image from '@images/que-shuju@2x.png'
19 import { mainStore } from '@/store' 19 import { mainStore } from '@/store'
20 import { storeToRefs } from 'pinia' 20 import { storeToRefs } from 'pinia'
21 - 21 +import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
22 import { ref } from 'vue' 22 import { ref } from 'vue'
23 import axios from '@/utils/axios'; 23 import axios from '@/utils/axios';
24 import { Toast } from 'vant'; 24 import { Toast } from 'vant';
...@@ -33,12 +33,10 @@ _.times(2, () => { ...@@ -33,12 +33,10 @@ _.times(2, () => {
33 $("html,body").animate({ "scrollTop": String(scrollTopCollection.value) + 'px' }); 33 $("html,body").animate({ "scrollTop": String(scrollTopCollection.value) + 'px' });
34 }); 34 });
35 35
36 -// 监听记录滚动位置 36 +onBeforeRouteLeave(() => {
37 -window.addEventListener('scroll',()=>{ 37 + // 监听记录滚动位置
38 - if (window.scrollY) {
39 store.changeScrollTopCollection(window.scrollY) 38 store.changeScrollTopCollection(window.scrollY)
40 - } 39 +})
41 -});
42 /*****************************************************/ 40 /*****************************************************/
43 41
44 // 处理书籍下作品列表 42 // 处理书籍下作品列表
......
...@@ -18,7 +18,7 @@ import Cookies from 'js-cookie' ...@@ -18,7 +18,7 @@ import Cookies from 'js-cookie'
18 import no_image from '@images/que-shuju@2x.png' 18 import no_image from '@images/que-shuju@2x.png'
19 import { mainStore } from '@/store' 19 import { mainStore } from '@/store'
20 import { storeToRefs } from 'pinia' 20 import { storeToRefs } from 'pinia'
21 - 21 +import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
22 import { ref } from 'vue' 22 import { ref } from 'vue'
23 import axios from '@/utils/axios'; 23 import axios from '@/utils/axios';
24 import { Toast } from 'vant'; 24 import { Toast } from 'vant';
...@@ -33,12 +33,10 @@ _.times(2, () => { ...@@ -33,12 +33,10 @@ _.times(2, () => {
33 $("html,body").animate({ "scrollTop": String(scrollTopLike.value) + 'px' }); 33 $("html,body").animate({ "scrollTop": String(scrollTopLike.value) + 'px' });
34 }); 34 });
35 35
36 -// 监听记录滚动位置 36 +onBeforeRouteLeave(() => {
37 -window.addEventListener('scroll',()=>{ 37 + // 监听记录滚动位置
38 - if (window.scrollY) {
39 store.changeScrollTopLike(window.scrollY) 38 store.changeScrollTopLike(window.scrollY)
40 - } 39 +})
41 -});
42 /*****************************************************/ 40 /*****************************************************/
43 41
44 // 处理书籍下作品列表 42 // 处理书籍下作品列表
......
...@@ -65,21 +65,19 @@ onActivated(() => { // keepAlive 重置后执行回调 ...@@ -65,21 +65,19 @@ onActivated(() => { // keepAlive 重置后执行回调
65 $("html,body").animate({ "scrollTop": String(scrollTop.value) + 'px' }); 65 $("html,body").animate({ "scrollTop": String(scrollTop.value) + 'px' });
66 }); 66 });
67 67
68 - // 监听记录滚动位置
69 - window.addEventListener('scroll',()=>{
70 - if (window.scrollY) {
71 - store.changeScrollTop(window.scrollY)
72 - }
73 - });
74 }); 68 });
75 69
76 -// 监听记录滚动位置 70 +const { scrollTop } = storeToRefs(store);
77 -window.addEventListener('scroll',()=>{ 71 +// 嵌套滚动，执行两个，先滚外面再滚里面
78 - if (window.scrollY) { 72 +_.times(2, () => {
79 - store.changeScrollTop(window.scrollY) 73 + $("html,body").animate({ "scrollTop": String(scrollTop.value) + 'px' });
80 - }
81 }); 74 });
82 75
76 +onBeforeRouteLeave(() => {
77 + // 监听记录滚动位置
78 + store.changeScrollTop(window.scrollY)
79 +})
80 +
83 /*********************************************************/ 81 /*********************************************************/
84 82
85 </script> 83 </script>
......