快捷導(dǎo)航

vue-router中scrollBehavior的巧妙用法

更新時(shí)間：2018年07月09日 11:31:13 作者：卸帳篷的黑人

本文給大家介紹vue-router中scrollBehavior的妙用,文中給大家提到了兩種解決方案，需要的朋友可以參考下

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

解決方案:

<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. 頁(yè)面返回出現(xiàn)空白屏問(wèn)題

問(wèn)題

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

解決方案一

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

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

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

解決方案二(推薦)

使用scrollBehavior中的異步滾動(dòng)操作

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

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

Vue實(shí)現(xiàn)點(diǎn)擊導(dǎo)航欄當(dāng)前標(biāo)簽后變色功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)點(diǎn)擊導(dǎo)航欄當(dāng)前標(biāo)簽后變色功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
Vue.js實(shí)現(xiàn)實(shí)例搜索應(yīng)用功能詳細(xì)代碼
本文給大家分享Vue.js實(shí)現(xiàn)實(shí)例搜索應(yīng)用功能詳細(xì)代碼，非常不錯(cuò)，感興趣的朋友參考下吧
2017-08-08
Vue密碼登陸加密RSA實(shí)現(xiàn)方案
這篇文章主要介紹了Vue密碼登陸加密RSA實(shí)現(xiàn)方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
基于WebRTC實(shí)現(xiàn)音視頻通話功能
WebRTC作為一種開(kāi)放標(biāo)準(zhǔn)的實(shí)時(shí)通信協(xié)議,能輕松實(shí)現(xiàn)瀏覽器之間的實(shí)時(shí)音視頻通信,本次主要分享基于WebRTC的音視頻通話技術(shù),講解WebRTC原理和音視頻傳輸?shù)汝P(guān)鍵概念,通過(guò)案例實(shí)踐,帶大家掌握如何搭建一個(gè)音視頻通話應(yīng)用,需要的朋友可以參考下
2024-05-05
vue動(dòng)態(tài)綁定多個(gè)class以及帶上三元運(yùn)算或其他條件
這篇文章主要介紹了vue動(dòng)態(tài)綁定多個(gè)class以及帶上三元運(yùn)算或其他條件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue開(kāi)發(fā)中出現(xiàn)Loading?Chunk?Failed的問(wèn)題解決
本文主要介紹了Vue開(kāi)發(fā)中出現(xiàn)Loading?Chunk?Failed的問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-03-03
Vue整合Node.js直連Mysql數(shù)據(jù)庫(kù)進(jìn)行CURD操作過(guò)程詳解
這篇文章主要給大家分享Vue整合Node.js，直連Mysql數(shù)據(jù)庫(kù)進(jìn)行CURD操作的詳細(xì)過(guò)程，文中有詳細(xì)的代碼講解，具有一定的參考價(jià)值,需要的朋友可以參考下
2023-07-07
如何使用VuePress搭建一個(gè)類型element ui文檔
這篇文章主要介紹了如何使用VuePress搭建一個(gè)類型element ui文檔，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-02-02
node+vue前后端分離實(shí)現(xiàn)登錄時(shí)使用圖片驗(yàn)證碼功能
這篇文章主要介紹了node+vue前后端分離實(shí)現(xiàn)登錄時(shí)使用圖片驗(yàn)證碼,記錄前端使用驗(yàn)證碼登錄的過(guò)程，后端用的是node.js，關(guān)鍵模塊是svg-captcha，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-11-11
詳解vue3.0 diff算法的使用(超詳細(xì))
這篇文章主要介紹了詳解vue3.0 diff算法的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07