問題:使用keep-alive標簽后部分安卓機返回緩存頁位置不精確問題
專注于為中小企業(yè)提供網(wǎng)站制作、網(wǎng)站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)新巴爾虎右免費做網(wǎng)站提供優(yōu)質的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了數(shù)千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉變。
解決方案:
const router = new Router({ scrollBehavior(to, from, savedPosition) { if (savedPosition && to.meta.keepAlive) { return savedPosition; } return { x: 0, y:0 }; }, });
2. 頁面返回出現(xiàn)空白屏問題
問題
【前提】：iOS設備
【步驟】: 頁面A是個列表很長-->滑到頁腳的時候點擊跳轉之后到頁面B--->再返回A頁面
--->屏幕會出現(xià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);
});
},
});該方案直接在路由進行處理，兼容每個頁面并且頁面加載完后并也不會產生1px的滾動位置。
總結
以上所述是小編給大家介紹的vue-router中scrollBehavior的巧妙用法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
