移動端vue切換路由滾動條恢復到頂部
阿新 • • 發佈:2018-11-12
問題描述:vue是單頁面應用。導致路由切換之後,之前的滾動距離會一直存在,頁面沒有到頂部。
網上大部分的解決方案是利用路由的afterEach方法解決,如下所示,
router.afterEach((to,from,next) => {
window.scrollTo(0,0);
});
這樣解決有如下幾個問題
1.scrollTo方法部分在手機上的部分瀏覽器不支援,也就是不相容。
2.用scrollTo方法會在蘋果手機瀏覽器上會產生返回白屏問題(vue專案在IOS中多次返回會出現一半白屏擋住頁面)網上有很多解決方案,我就不一 一敘述了。
最後總結下來還是利用vue-router自帶的滾動行為解決 ,官方網址https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html
在定義路由的new Route裡新增scrollBehavior方法就可以了
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
截圖如下: