溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue頁面如何切換到滾動頁面顯示頂部

發布時間:2021-06-26 14:10:14 來源:億速云 閱讀:203 作者:小新 欄目:web開發

這篇文章主要介紹了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頁面如何切換到滾動頁面顯示頂部”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業資訊頻道,更多相關知識等著你來學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

vue
AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女