vue scroller返回頁面記住滾動(dòng)位置的實(shí)例代碼
更新時(shí)間：2018年01月29日 15:31:55 作者：symY_Y
這篇文章主要介紹了vue scroller返回頁面記住滾動(dòng)位置的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
1，設(shè)置keepAlive：是否緩存
router:
{
path: '/actlist',
name: 'actlist',
component: actlist,
meta: {
keepAlive: true
}
}
2,設(shè)置渲染頁面
app.vue
<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>
3,記錄滾動(dòng)位置并賦值
beforeRouteEnter(to,from,next){
if(!sessionStorage.askPositon || from.path == '/'){//當(dāng)前頁面刷新不需要切換位置
sessionStorage.askPositon = '';
next();
}else{
next(vm => {
if(vm && vm.$refs.my_scroller){//通過vm實(shí)例訪問this
setTimeout(function () {
vm.$refs.my_scroller.scrollTo(0, sessionStorage.askPositon, true);
},0)//同步轉(zhuǎn)異步操作
}
})
}
},
beforeRouteLeave(to,from,next){//記錄離開時(shí)的位置
sessionStorage.askPositon = this.$refs.my_scroller && this.$refs.my_scroller.getPosition() && this.$refs.my_scroller.getPosition().top;
next()
}
總結(jié)
以上所述是小編給大家介紹的vue scroller返回頁面記住滾動(dòng)位置的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue實(shí)現(xiàn)阻止瀏覽器記住密碼功能的三種方法
本文主要介紹了Vue實(shí)現(xiàn)阻止瀏覽器記住密碼功能的三種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
Vue學(xué)習(xí)之路之登錄注冊(cè)實(shí)例代碼
本篇文章主要介紹了Vue學(xué)習(xí)之路之登錄注冊(cè)實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了vue中的el-tooltip提示黑框遮擋問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
組件是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼。這篇文章主要介紹了VUE 中添加手機(jī)驗(yàn)證碼組件,需要的朋友可以參考下2017-12-12
vue3項(xiàng)目vite.config.js配置代理、端口、打包名以及圖片壓縮
這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目vite.config.js配置代理、端口、打包名以及圖片壓縮的相關(guān)資料,因?yàn)?.0版本中vue已經(jīng)內(nèi)置了很多關(guān)于webpack的配置,一般情況下開箱即用,需要修改則可以在vue.config.js文件中完成,需要的朋友可以參考下2023-12-12
在?Vue3?項(xiàng)目開發(fā)中,事件冒泡經(jīng)常會(huì)導(dǎo)致一些意想不到的問題,本文為大家整理了五個(gè)Vue3中阻止事件冒泡的方法,希望對(duì)大家有一定的幫助2024-11-11
這篇文章主要介紹了vue數(shù)組去重的12種方法示例全面詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要為大家介紹了前端框架封裝Vue第三方組件的三個(gè)技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue文件如何代替?zhèn)鹘y(tǒng)的HTML文件
隨著前端工程化的不斷推進(jìn),傳統(tǒng)的HTML、CSS、JavaScript三者分離的開發(fā)模式逐漸顯露出一些不足之處,尤其是在構(gòu)建復(fù)雜的單頁應(yīng)用（SPA）時(shí),Vue.js作為一個(gè)現(xiàn)代化的前端框架,提供了多種工具和技術(shù)來簡(jiǎn)化開發(fā)流程,本文將探討.vue文件是如何替代傳統(tǒng)HTML文件的角色2024-10-10
這篇文章主要介紹了Vue2.x 的雙向綁定原理，Vue 是利用的 Object.defineProperty() 方法進(jìn)行的數(shù)據(jù)劫持，利用 set、get 來檢測(cè)數(shù)據(jù)的讀寫。需要的朋友可以參考下面文章的具體內(nèi)容2021-09-09