問題:使用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 };
},
});
前端全棧學習交流圈:866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸,提升思維能力 羣內有大量PDF可供自取,更有乾貨實戰項目視頻進羣免費領取。
- 頁面返回出現空白屏問題
問題
【前提】: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);
});
},
});
前端全棧學習交流圈:866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸,提升思維能力 羣內有大量PDF可供自取,更有乾貨實戰項目視頻進羣免費領取。
該方案直接在路由進行處理,兼容每個頁面並且頁面加載完後並也不會產生1px的滾動位置。