前言

下班前，20分鐘，發(fā)一篇。。。

簡單介紹，使用keep-alive的時(shí)候，返回前一頁，沒有保持滾動(dòng)條位置。

事實(shí)上，就算不使用keep-alive，位置也沒有被記錄。

但是，在不適用keep-alive的時(shí)候，頁面內(nèi)容會刷新，所以就隨他去了……就是這么任性……

思路

官方有推薦一個(gè)scrollBehavior，鏈接，但是上面標(biāo)注，只在history.pushState的瀏覽器生效，不知道是不是只能開啟history.pushState才可以使用，看了下實(shí)現(xiàn)，挺不友好的，還是自己搞一個(gè)吧。。。

實(shí)現(xiàn)思路是這樣的，首先給路由增加一個(gè)對象meta：

meta: {
  keepAlive: true,
  scrollTop: 0,
}

keepAlive是否需要保持頁面，scrollTop記錄頁面的滾動(dòng)位置。

然后在app.vue增加如下入口：

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

這樣就啟用keep-alive了。

然后在全局main.ts增加一個(gè)全局路由控制：

router.beforeEach((to: Route, from: Route, next: () => void) => {  
  if (from.meta.keepAlive) {
  const $content = document.querySelector('#content');
  const scrollTop = $content ? $content.scrollTop : 0;
  from.meta.scrollTop = scrollTop;
 }
 next();
});

很簡單，離開的時(shí)候判斷當(dāng)前頁是否需要保持頁面，如果需要，記錄頁面主容器content的滾動(dòng)位置，寫入路由。

然后，每次進(jìn)入保持好的頁面，讀取滾動(dòng)條位置scrollTop，修改主容器的scrollTop，就搞定了：

public activated() {
  const scrollTop = this.$route.meta.scrollTop;
  const $content = document.querySelector('#content');
  if (scrollTop && $content) {
   $content.scrollTop = scrollTop;
  }
}

看起來很簡單哦。

遺留問題

1、是不是每個(gè)頁面都可以記錄滾動(dòng)條位置呢？

其實(shí)不是的，有的頁面，內(nèi)部有js交互，比如tab交互，不同的tab，頁面可滾動(dòng)的高度不一致，如果不保持頁面狀態(tài)而統(tǒng)一記錄滾動(dòng)位置，有可能導(dǎo)致滾動(dòng)條的位置錯(cuò)位。

2、能不能把a(bǔ)ctivated這一步寫到全局的main.ts或者state去呢？

有想過這點(diǎn)，但是目前來說，沒找到實(shí)現(xiàn)的方法。

首先，如果通過router來控制，做不到，全局路由控制只能在頁面加載前監(jiān)聽，取不到載入頁的元素。

如果寫在一個(gè)通用的全局函數(shù)去控制，比如定義一個(gè)state，當(dāng)頁面加載完的時(shí)候設(shè)置，那需要定義一個(gè)mixins來處理，但是對這個(gè)mixins不太熟悉，暫時(shí)還不知道該怎么做，可能有時(shí)間找個(gè)方法搞定它。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論