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