您好,登錄后才能下訂單哦!
怎么在vue中利用keep-alive保持滾動條位置?很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。
首先給路由增加一個對象meta:
meta: { keepAlive: true, scrollTop: 0, }
keepAlive是否需要保持頁面,scrollTop記錄頁面的滾動位置。
然后在app.vue增加如下入口:
<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>
這樣就啟用keep-alive了。
然后在全局main.ts增加一個全局路由控制:
router.beforeEach((to: Route, from: Route, next: () => void) => { if (from.meta.keepAlive) { const $content = document.querySelector('#content'); const scrollTop = $content ? $content.scrollTop : 0; from.meta.scrollTop = scrollTop; } next(); });
很簡單,離開的時候判斷當前頁是否需要保持頁面,如果需要,記錄頁面主容器content的滾動位置,寫入路由。
然后,每次進入保持好的頁面,讀取滾動條位置scrollTop,修改主容器的scrollTop,就搞定了:
public activated() { const scrollTop = this.$route.meta.scrollTop; const $content = document.querySelector('#content'); if (scrollTop && $content) { $content.scrollTop = scrollTop; } }
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創建可維護性和可測試性更強的代碼庫,Vue允許可以將一個網頁分割成可復用的組件,每個組件都包含屬于自己的HTML、CSS、JavaScript,以用來渲染網頁中相應的地方,所以越來越多的前端開發者使用vue。
看完上述內容是否對您有幫助呢?如果還想對相關知識有進一步的了解或閱讀更多相關文章,請關注億速云行業資訊頻道,感謝您對億速云的支持。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。