vue-router中scrollBehavior的巧妙用法

發(fā)布時間：2020-09-24 03:50:07 來源：腳本之家閱讀：279 作者：卸帳篷的黑人欄目：web開發(fā)

問題:使用keep-alive標(biāo)簽后部分安卓機(jī)返回緩存頁位置不精確問題

解決方案:

<div id="app">
  <keep-alive>
   <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
const router = new Router({
 scrollBehavior(to, from, savedPosition) {
  if (savedPosition && to.meta.keepAlive) {
   return savedPosition;
  }
  return { x: 0, y:0 };
 },
});

2. 頁面返回出現(xiàn)空白屏問題

問題

【前提】：iOS設(shè)備
【步驟】: 頁面A是個列表很長-->滑到頁腳的時候點擊跳轉(zhuǎn)之后到頁面B--->再返回A頁面
--->屏幕會出現(xiàn)空白遮罩層--->手指輕觸屏幕滑動--->遮罩層消失

vue-router中scrollBehavior的巧妙用法

解決方案一

在接口請求成功后的回調(diào)操作完成后進(jìn)行該操作,例如

// fetchCourseList是一個封裝好的Promise請求
fetchCourseList().then(({ data: courses }) => {
 this.courses = courses;
}).then(() => {
  setTimeout(() => {
    window.scrollTo(0, 1);
    window.scrollTo(0, 0);
  });
});

該方案的弊端: 每個頁面都需要做這樣的處理，不推薦使用。

解決方案二(推薦)

使用scrollBehavior中的異步滾動操作

const router = new Router({
 scrollBehavior(to, from, savedPosition) {
  // keep-alive 返回緩存頁面后記錄瀏覽位置
  if (savedPosition && to.meta.keepAlive) {
   return savedPosition;
  }
  // 異步滾動操作
  return new Promise((resolve) => {
   setTimeout(() => {
    resolve({ x: 0, y: 1 });
   }, 0);
  });
 },
});

該方案直接在路由進(jìn)行處理，兼容每個頁面并且頁面加載完后并也不會產(chǎn)生1px的滾動位置。

總結(jié)

以上所述是小編給大家介紹的vue-router中scrollBehavior的巧妙用法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！

向AI問一下細(xì)節(jié)

vue-router中scrollBehavior的巧妙用法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽