Example Analysis of scrolling reserved Scroll Bar position of list component in vant

This article mainly introduces the example analysis of scrolling reserved scroll bar position of list component in vant, which is very detailed and has certain reference value. Friends who are interested must read it!

The vant list component scrolls to retain the scroll bar position and needs to be used in conjunction with keepAlive.

1. The premise of saving the location is to use the keepAlive component to do the cache, app.vue code

2. In the routing file router.js, add scrollTop and keepAlive to each routing meta

{path:'/ home', name: 'home', component: resolve = > require ([' @ / views/home/index.vue'], resolve), meta: {title: 'home', index: 1, keepAlive: true, scrollTop: 0}}, {path:'/ classify', name: 'classify' Component: resolve = > require (['@ / views/classify/index.vue'], resolve), meta: {title: 'classification', index: 1, keepAlive: true, scrollTop: 0}}, {path:'/ shopping', name: 'shopping', component: resolve = > require ([' @ / views/shopping/index.vue'], resolve) Meta: {title: 'shopping cart', index: 1, keepAlive: true, scrollTop: 0}}, {path:'/ detail', name: 'detail', component: resolve = > require ([' @ / views/detail/index.vue'], resolve), meta: {title: 'details, index: 2 / / keepAlive: true, / / scrollTop: 0}}

3. Then in main.js, record the position of the scroll bar

Router.beforeEach ((to, from, next) = > {if (from.meta.keepAlive) {const $wrapper = document.querySelector ('.app-wrapper'); / / the outer container of the list pay attention to find the scrolling box const scrollTop= $wrapper? $wrapper.scrollTop: 0; console.log (' scrollTop=', scrollTop) from.meta.scrollTop = scrollTop;} next ();})

4. Finally, where you need to record and retain the position of the scroll bar, get the scrollTop through activated (this function is executed every time you enter the page, and only if you use the keepAlive component in conjunction with it).

Activated () {const scrollTop = this.$route.meta.scrollTop; const $wrapper = document.querySelector ('.app-wrapper'); if (scrollTop & & $wrapper) {$wrapper.scrollTop = scrollTop;}}

For example, if you cache some pages and don't want to scroll with them, just set scrollTop to 0.

Activated () {const $wrapper = document.querySelector (".app-wrapper"); $wrapper.scrollTop = 0;}

Note that if the page scrolls, other pages with scroll bars will also scroll with it, which can be processed in other pages, or whether to determine whether the cache location is determined from the details page to the list page, if not, go back to the top, but pay attention to the use of the routing hook function this

The above is all the contents of the article "sample Analysis of scrolling reserved Scroll Bar position of list components in vant". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!