項目結束,測試時發現在首頁商品列表中,向上滑動幾頁后點擊進入詳情,從詳情頁面返回商品列表時,頁面回到了最頂部,測試不通過說是用戶體驗不好,要求從哪里點擊進去返回該頁面時回到原先的滾動頁面。
思路:因為vue是單頁面應用,進入其他頁面時會銷毀該頁面,用keep-alive不讓其刷新,具體實現為:
(1).在App.vue中加入:
<template> <div id="app"> <!--<router-view/>--> <!--頁面返回不刷新--> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div> </template>
(2).index.js頁面
export default new Router({ routes: [{ path: '/', name: 'index', component: index, meta: { keepAlive: true } },
這樣在index.vue中,mounted方發只走一次,在瀏覽器上實現了返回原來滾動位置的目的。但是在手機上測試,發現沒用,解決手機上實現目的的方法:
//在頁面離開時記錄滾動位置 beforeRouteLeave (to, from, next) { this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop next() },
//進入該頁面時,用之前保存的滾動位置賦值 beforeRouteEnter (to, from, next) { next(vm => { document.body.scrollTop = vm.scrollTop }) },
OK!實現!!
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com