The scroll bar position is retained when scrolling the vant list component

The scroll bar position is retained when scrolling the vant list component. This needs to be used in conjunction with keepAlive. I share this article for your reference.

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

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if='$route.meta.keepAlive'/>
    </keep-alive>
    <router-view v-if='!$route.meta.keepAlive'/>
  </div>
</template>

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: 'Homepage',
        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 should pay attention to finding the scrolling box const scrollTop = $wrapper ? $wrapper.scrollTop : 0;
    console.log('scrollTop=', scrollTop)
    from.meta.scrollTop = scrollTop;
  }
  next();
});

4. Finally, get the scrollTop by activated (this function will be executed every time you enter the page, and it is only effective when used in conjunction with the keepAlive component) where you need to record the scroll bar position

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 do not want to scroll with them, you can 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. You can process it in other pages, or determine whether to cache the location from the detail page to the list page. If not, return to the top, but pay attention to the use of the routing hook function this;

You may also be interested in:

The problem and solution of list component not triggering load event when switching Vue vantUI tab
Usage of van-list in vant
Solve the pitfalls of using the Vant framework to do H5 (pull down to refresh, pull up to load, etc.)
A bug in the vant-ui framework (solve the problem that onload does not trigger after switching)
Pitfalls and solutions when using the Vant framework list component

<<: Understand the principle of page replacement algorithm through code examples

>>: How to enable the root account in Ubuntu 20.04