溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
問題:使用keep-alive標簽后部分安卓機返回緩存頁位置不精確問題
解決方案:
<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. 頁面返回出現空白屏問題
問題
【前提】：iOS設備
【步驟】: 頁面A是個列表很長-->滑到頁腳的時候點擊跳轉之后到頁面B--->再返回A頁面
--->屏幕會出現空白遮罩層--->手指輕觸屏幕滑動--->遮罩層消失
解決方案一
在接口請求成功后的回調操作完成后進行該操作,例如
// 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);
});
},
});
該方案直接在路由進行處理，兼容每個頁面并且頁面加載完后并也不會產生1px的滾動位置。
總結
以上所述是小編給大家介紹的vue-router中scrollBehavior的巧妙用法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
