vue頁面切換到滾動頁面顯示頂部的實例
在用mint ui寫移動端從'listview'跳轉(zhuǎn)到詳情頁時,詳情頁面由于大于手機(jī)高度可以滾動,當(dāng)點擊'listview'滾動list進(jìn)入詳情頁面時發(fā)現(xiàn)詳情頁面不是從頂部開始顯示。
一、目標(biāo)：
‘listview'進(jìn)入詳情頁面時詳情頁面從頁面頂部開始顯示。
二、讓首先查了下兩個頁面的scrollY,每次都是不一樣的,也沒有發(fā)現(xiàn)listview與詳情頁面之間的scrollY之間的規(guī)律
三、解決思路：進(jìn)入詳情頁面的時候固定滾動頁面的位置在頂部
四、代碼實現(xiàn)：vue里面寫法如下，至于updated生命周期里面
updated() {
window.scroll(0, 0);
}
五、問題已經(jīng)解決，但是網(wǎng)絡(luò)慢的時候可以清晰的看到頁面底部滾動到頂部的過程不是很美觀，這個問題可以自己加上網(wǎng)絡(luò)加載數(shù)據(jù)時候的蒙版和loading,我是加了
六、在分享個關(guān)于vue從登陸頁面進(jìn)入主頁面的攔截器的寫法
(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頁面切換到滾動頁面顯示頂部的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了uni-app在線預(yù)覽pdf文件的相關(guān)資料,本文主要介紹了如何在Vue項目中使用PDF.js插件進(jìn)行PDF文件的預(yù)覽,包括插件的下載、版本兼容問題的處理,以及在static文件夾下新建pdf文件夾存放解壓文件,需要的朋友可以參考下2024-10-10
vue中提示$index is not defined錯誤的解決方式
這篇文章主要介紹了vue中提示$index is not defined錯誤的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
本文詳細(xì)介紹了Vue中nextTick的原理和使用方法,Vue采用異步渲染機(jī)制,通過nextTick可以確保在DOM更新后執(zhí)行回調(diào),nextTick依賴微任務(wù)和宏任務(wù),優(yōu)先使用Promise,降級到MutationObserver/setTimeout,Vue3進(jìn)一步優(yōu)化了nextTick,減少了復(fù)雜度并提升了性能2025-02-02
Vue引入路徑正確但一直報錯問題:Already included file name&n
這篇文章主要介紹了Vue引入路徑正確但一直報錯:Already included file name ‘××ב differs from file name ‘××ב only in casing.具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了vue項目依賴檢查depcheck問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue3.4中v-model雙向數(shù)據(jù)綁定新玩法詳解
defineModel?是一個新的?<script?setup>?宏,旨在簡化支持?v-model?的組件的實現(xiàn),?這個宏用來聲明一個雙向綁定?prop,下面我們就來看看他的具體使用吧2024-03-03
對于vue來說，組件之間的消息傳遞是非常重要的，用vue可以是要組件復(fù)用的，而組件實例的作用域是相互獨立，這意味著不同組件之間的數(shù)據(jù)無法互相引用，一般來說，組件之間可以有幾種關(guān)系，下面是我對組件之間消息傳遞的常用方式的總結(jié)2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue滾動tab跟隨切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
基于vue實現(xiàn)8小時帶刻度的時間軸根據(jù)當(dāng)前時間實時定位功能
這篇文章主要介紹了基于vue實現(xiàn)8小時帶刻度的時間軸根據(jù)當(dāng)前時間實時定位功能,開始時間、結(jié)束時間可配置，根據(jù)當(dāng)前時間初始化位置，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
下面小編就為大家分享一篇vue.js項目打包上線的圖文教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-11-11