vant中l(wèi)ist組件滾動(dòng)保留滾動(dòng)條位置的示例分析

這篇文章主要介紹vant中l(wèi)ist組件滾動(dòng)保留滾動(dòng)條位置的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

vant list組件滾動(dòng)保留滾動(dòng)條位置，需結(jié)合keepAlive使用。

1、保存位置的前提是用的keepAlive組件來(lái)做緩存，app.vue代碼

<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、在路由文件router.js，給每個(gè)路由meta添加scrollTop和keepAlive

 {
      path: '/home',
      name: 'home',
      component: resolve => require(['@/views/home/index.vue'], resolve),
      meta: {
        title: '首頁(yè)',
        index: 1,
        keepAlive: true,
        scrollTop: 0
      }
    },
    {
      path: '/classify',
      name: 'classify',
      component: resolve => require(['@/views/classify/index.vue'], resolve),
      meta: {
        title: '分類',
        index: 1,
        keepAlive: true,
        scrollTop: 0
      }
    },
    {
      path: '/shopping',
      name: 'shopping',
      component: resolve => require(['@/views/shopping/index.vue'], resolve),
      meta: {
        title: '購(gòu)物車',
        index: 1,
        keepAlive: true,
        scrollTop: 0
      }
    },
    {
      path: '/detail',
      name: 'detail',
      component: resolve => require(['@/views/detail/index.vue'], resolve),
      meta: {
        title: '詳情',
        index: 2,
        // keepAlive: true,
        // scrollTop: 0
      }
    },

3、然后在main.js,記錄滾動(dòng)條的位置

router.beforeEach((to, from, next) => {  
  if (from.meta.keepAlive) {
    const $wrapper = document.querySelector('.app-wrapper'); // 列表的外層容器 注意找到滾動(dòng)的盒子
    const scrollTop = $wrapper ? $wrapper.scrollTop : 0;
    console.log('scrollTop=', scrollTop)
    from.meta.scrollTop = scrollTop;
  }
  next();
});

4、最后在需要記錄保留滾動(dòng)條位置的地方獲取通過(guò)activated（這個(gè)函數(shù)每次進(jìn)入頁(yè)面都會(huì)執(zhí)行，只有結(jié)合使用keepAlive組件才有效）來(lái)獲取scrollTop

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

比如緩存了某些頁(yè)面也不想隨之滾動(dòng)，則把scrollTop置0即可；

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

注意，頁(yè)面滾動(dòng)的話，其他頁(yè)面有滾動(dòng)條的也會(huì)隨之滾動(dòng)，可以對(duì)其他頁(yè)面里面處理，或者判斷是否從詳情頁(yè)到列表頁(yè)來(lái)判斷是否緩存位置，如果不是，則回到頂部，但是注意路由鉤子函數(shù)this的使用；

以上是“vant中l(wèi)ist組件滾動(dòng)保留滾動(dòng)條位置的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！