1. 程式人生 > >移動端vue切換路由滾動條恢復到頂部

移動端vue切換路由滾動條恢復到頂部

問題描述: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 }
  }
}

截圖如下:
在這裡插入圖片描述