這篇文章主要介紹了vue頁(yè)面如何切換到滾動(dòng)頁(yè)面顯示頂部，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
在用mint ui寫移動(dòng)端從'listview'跳轉(zhuǎn)到詳情頁(yè)時(shí),詳情頁(yè)面由于大于手機(jī)高度可以滾動(dòng),當(dāng)點(diǎn)擊'listview'滾動(dòng)list進(jìn)入詳情頁(yè)面時(shí)發(fā)現(xiàn)詳情頁(yè)面不是從頂部開始顯示。
一、目標(biāo)：
‘listview'進(jìn)入詳情頁(yè)面時(shí)詳情頁(yè)面從頁(yè)面頂部開始顯示。
二、讓首先查了下兩個(gè)頁(yè)面的scrollY,每次都是不一樣的,也沒(méi)有發(fā)現(xiàn)listview與詳情頁(yè)面之間的scrollY之間的規(guī)律
三、解決思路：進(jìn)入詳情頁(yè)面的時(shí)候固定滾動(dòng)頁(yè)面的位置在頂部
四、代碼實(shí)現(xiàn)：vue里面寫法如下，至于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è)面的攔截器的寫法
(1) 在login.vue登陸成功的時(shí)候存入sessionStorage
sessionStorage.setItem('isLogin', true)(2) 在Router的index.js里面寫入
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()
}
})即可完成攔截器！
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue頁(yè)面如何切換到滾動(dòng)頁(yè)面顯示頂部”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
