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

上一篇: 配置vue全局方法的两种方式实例下一篇:简单谈谈JavaScript变量提升

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

发布时间：2022-04-16 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了vant list组件滚动保留滚动条位置，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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 &#63; $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的使用；

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的vant list组件滚动保留滚动条位置全部内容，希望文章能够帮你解决vant list组件滚动保留滚动条位置所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：vant

上一篇: 配置vue全局方法的两种方式实例下一篇:简单谈谈JavaScript变量提升

猜你在找的JavaScript相关文章

html font标签如何设置字体大小？html font标签属性用法介绍 2022-05-16
vue3+TypeScript+vue-router的使用方法 2022-04-16
vue3获取当前路由地址 2022-04-16
如何利用React实现图片识别App 2022-04-16
JavaScript展开运算符和剩余运算符的区别详解 2022-04-16
微信小程序中使用vant框架的具体步骤 2022-04-16
Vue elementUI表单嵌套表格并对每行进行校验详解 2022-04-16
如何利用Typescript封装本地存储 2022-04-16
微信小程序中wxs文件的一些妙用分享 2022-04-16
JavaScript的Set数据结构详解 2022-04-16