vue頁面切換到滾動(dòng)頁面顯示頂部的實(shí)例
在用mint ui寫移動(dòng)端從'listview'跳轉(zhuǎn)到詳情頁時(shí),詳情頁面由于大于手機(jī)高度可以滾動(dòng),當(dāng)點(diǎn)擊'listview'滾動(dòng)list進(jìn)入詳情頁面時(shí)發(fā)現(xiàn)詳情頁面不是從頂部開始顯示。
一、目標(biāo)：
‘listview'進(jìn)入詳情頁面時(shí)詳情頁面從頁面頂部開始顯示。
二、讓首先查了下兩個(gè)頁面的scrollY,每次都是不一樣的,也沒有發(fā)現(xiàn)listview與詳情頁面之間的scrollY之間的規(guī)律
三、解決思路：進(jìn)入詳情頁面的時(shí)候固定滾動(dòng)頁面的位置在頂部
四、代碼實(shí)現(xiàn)：vue里面寫法如下，至于updated生命周期里面
updated() {
window.scroll(0, 0);
}
五、問題已經(jīng)解決，但是網(wǎng)絡(luò)慢的時(shí)候可以清晰的看到頁面底部滾動(dòng)到頂部的過程不是很美觀，這個(gè)問題可以自己加上網(wǎng)絡(luò)加載數(shù)據(jù)時(shí)候的蒙版和loading,我是加了
六、在分享個(gè)關(guān)于vue從登陸頁面進(jìn)入主頁面的攔截器的寫法
(1) 在login.vue登陸成功的時(shí)候存入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頁面切換到滾動(dòng)頁面顯示頂部的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解Vue用自定義指令完成一個(gè)下拉菜單（select組件）
本篇文章主要介紹了詳解Vue用自定義指令完成一個(gè)下拉菜單（select組件），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
vue 中動(dòng)態(tài)綁定class 和 style的方法代碼詳解
這篇文章主要介紹了vue 中動(dòng)態(tài)綁定class 和 style的方法，通過實(shí)例結(jié)合的形式給大家接受的非常詳細(xì)，需要的朋友參考下吧2018-06-06
在vue項(xiàng)目中優(yōu)雅的使用SVG的方法實(shí)例詳解
本文旨在介紹如何在項(xiàng)目中配置和方便的使用svg圖標(biāo)。本文以vue項(xiàng)目為例給大家介紹在vue項(xiàng)目中優(yōu)雅的使用SVG的方法，需要的朋友參考下吧2018-12-12
這篇文章主要介紹了Vue高級(jí)特性概念原理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-03-03
vue中el-table實(shí)現(xiàn)自動(dòng)吸頂效果(支持fixed)
本文主要介紹了vue中el-table實(shí)現(xiàn)自動(dòng)吸頂效果，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue自定義省市區(qū)三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了Vue自定義省市區(qū)三級(jí)聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
解決Vue_localStorage本地存儲(chǔ)和本地取值問題
這篇文章主要介紹了解決Vue_localStorage本地存儲(chǔ)和本地取值問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要給大家介紹了關(guān)于Vue圖片裁剪組件的相關(guān)資料,本文介紹的組件是基于vue-cropper二次封裝,vue-cropper大家應(yīng)該都很熟悉了吧,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了解讀vant的Uploader上傳問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue3+TypeScript實(shí)現(xiàn)PDF預(yù)覽組件
這篇文章主要為大家詳細(xì)介紹了如何基于Vue3+TypeScript實(shí)現(xiàn)PDF預(yù)覽組件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04