vue頁面切換到捲動頁面顯示頂部的實例_vue.js

下面我就為大家分享一篇vue頁面切換到滾動頁面顯示頂部的實例，具有很好的參考價值，希望對大家有所幫助。

在用mint ui寫行動裝置從'listview'跳到詳情頁時,詳情頁面由於大於手機高度可以滾動,當點​​擊'listview'滾動list進入詳情頁面時發現詳情頁面不是從頂部開始顯示。

一、目標：

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

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

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

四、程式碼實作：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頁面DOM操作不生效的問題

nodejs實作超簡單產生二維碼的方法

nodejs mongodb aggregate級聯查詢操作範例

##

以上是vue頁面切換到捲動頁面顯示頂部的實例_vue.js的詳細內容。更多資訊請關注PHP中文網其他相關文章！