纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

vant滚动保留滚动条位置 vant list组件滚动保留滚动条位置

牛先森家的牛奶   2021-09-13 我要评论
想了解vant list组件滚动保留滚动条位置的相关内容吗,牛先森家的牛奶在本文为您仔细讲解vant滚动保留滚动条位置的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vant,list组件滚动保留滚动条位置,vant滚动保留滚动条位置,下面大家一起来学习吧。

vant list组件滚动保留滚动条位置,需结合keepAlive使用,分享此篇,供大家参考。

1、保存位置的前提是用的keepAlive组件来做缓存,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,给每个路由meta添加scrollTop和keepAlive

 {
      path: '/home',
      name: 'home',
      component: resolve => require(['@/views/home/index.vue'], resolve),
      meta: {
        title: '首页',
        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: '购物车',
        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,记录滚动条的位置

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

4、最后在需要记录保留滚动条位置的地方获取通过activated(这个函数每次进入页面都会执行,只有结合使用keepAlive组件才有效)来获取scrollTop

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

比如缓存了某些页面也不想随之滚动,则把scrollTop置0即可;

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

注意,页面滚动的话,其他页面有滚动条的也会随之滚动,可以对其他页面里面处理,或者判断是否从详情页到列表页来判断是否缓存位置,如果不是,则回到顶部,但是注意路由钩子函数this的使用;


相关文章

猜您喜欢

  • spring JavaConfig配置 spring使用JavaConfig进行配置的方法

    想了解spring使用JavaConfig进行配置的方法的相关内容吗,望穿秋水见伊人在本文为您仔细讲解spring JavaConfig配置的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:spring,JavaConfig配置,spring,JavaConfig,下面大家一起来学习吧。..
  • java synchronized锁升级 java中synchronized锁的升级过程

    想了解java中synchronized锁的升级过程的相关内容吗,NetWhite在本文为您仔细讲解java synchronized锁升级的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:java,锁升级,synchronized锁的升级,java锁升级过程,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.ben10gamesx.com 【Win11软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式