本篇內(nèi)容介紹了“vue頁(yè)面怎么切換到滾動(dòng)頁(yè)面顯示頂部”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)主要從事網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)藍(lán)山,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢建站服務(wù):028-86922220

一、目標(biāo)：

‘listview'進(jìn)入詳情頁(yè)面時(shí)詳情頁(yè)面從頁(yè)面頂部開(kāi)始顯示。

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

三、解決思路：進(jìn)入詳情頁(yè)面的時(shí)候固定滾動(dòng)頁(yè)面的位置在頂部

四、代碼實(shí)現(xiàn)：vue里面寫(xiě)法如下，至于updated生命周期里面

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

五、問(wèn)題已經(jīng)解決，但是網(wǎng)絡(luò)慢的時(shí)候可以清晰的看到頁(yè)面底部滾動(dòng)到頂部的過(guò)程不是很美觀，這個(gè)問(wèn)題可以自己加上網(wǎng)絡(luò)加載數(shù)據(jù)時(shí)候的蒙版和loading,我是加了

六、在分享個(gè)關(guān)于vue從登陸頁(yè)面進(jìn)入主頁(yè)面的攔截器的寫(xiě)法

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

sessionStorage.setItem('isLogin', true)

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

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

即可完成攔截器！

“vue頁(yè)面怎么切換到滾動(dòng)頁(yè)面顯示頂部”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！