在用mint ui寫移動端從'listview'跳轉到詳情頁時,詳情頁面由于大于手機高度可以滾動,當點擊'listview'滾動list進入詳情頁面時發(fā)現詳情頁面不是從頂部開始顯示。

一、目標：

‘listview'進入詳情頁面時詳情頁面從頁面頂部開始顯示。

二、讓首先查了下兩個頁面的scrollY,每次都是不一樣的,也沒有發(fā)現listview與詳情頁面之間的scrollY之間的規(guī)律

三、解決思路：進入詳情頁面的時候固定滾動頁面的位置在頂部

四、代碼實現：vue里面寫法如下，至于updated生命周期里面

updated() {     window.scroll(0, 0);   } 

五、問題已經解決，但是網絡慢的時候可以清晰的看到頁面底部滾動到頂部的過程不是很美觀，這個問題可以自己加上網絡加載數據時候的蒙版和loading,我是加了

六、在分享個關于vue從登陸頁面進入主頁面的攔截器的寫法

(1) 在login.vue登陸成功的時候存入sessionStorage

sessionStorage.setItem('isLogin', true) 

(2) 在Router的index.js里面寫入

router.beforeEach((to, from, next) => {//  '/'是登陸頁面的路由 if (to.path == '/') {  sessionStorage.removeItem('isLogin'); } let user = JSON.parse(sessionStorage.getItem('isLogin')); if (!user && to.path != '/') {  next({ path: '/' }) } else {  next() }})

即可完成攔截器！

以上這篇vue頁面切換到滾動頁面顯示頂部的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。