vue頁(yè)面如何切換到滾動(dòng)頁(yè)面顯示頂部
這篇文章主要介紹了vue頁(yè)面如何切換到滾動(dòng)頁(yè)面顯示頂部，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
建網(wǎng)站原本是網(wǎng)站策劃師、網(wǎng)絡(luò)程序員、網(wǎng)頁(yè)設(shè)計(jì)師等，應(yīng)用各種網(wǎng)絡(luò)程序開發(fā)技術(shù)和網(wǎng)頁(yè)設(shè)計(jì)技術(shù)配合操作的協(xié)同工作。創(chuàng)新互聯(lián)公司專業(yè)提供成都做網(wǎng)站、網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站制作(企業(yè)站、成都響應(yīng)式網(wǎng)站建設(shè)公司、電商門戶網(wǎng)站)等服務(wù),從網(wǎng)站深度策劃、搜索引擎友好度優(yōu)化到用戶體驗(yàn)的提升,我們力求做到極致!
在用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,每次都是不一樣的,也沒有發(fā)現(xiàn)listview與詳情頁(yè)面之間的scrollY之間的規(guī)律
三、解決思路：進(jìn)入詳情頁(yè)面的時(shí)候固定滾動(dòng)頁(yè)面的位置在頂部
四、代碼實(shí)現(xiàn)：vue里面寫法如下，至于updated生命周期里面
updated() {
window.scroll(0, 0);
}五、問題已經(jīng)解決，但是網(wǎng)絡(luò)慢的時(shí)候可以清晰的看到頁(yè)面底部滾動(dòng)到頂部的過程不是很美觀，這個(gè)問題可以自己加上網(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)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
當(dāng)前題目：vue頁(yè)面如何切換到滾動(dòng)頁(yè)面顯示頂部
網(wǎng)站鏈接：http://m.jiaotiyi.com/article/iecpcd.html