zoukankan      html  css  js  c++  java
  • vant list组件滚动保留滚动条位置,结合keepAlive

    前提是用的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>

    首先在路由文件router.js,给每个路由meta添加scrollTop和keepAlive

    {
          path: '/',
          name: 'home',
          meta: {
            title: "标题",
            keepAlive: true,
            scrollTop: 0
          },
          component: Home
     },

    然后在main.js,记录滚动条的位置

    router.beforeEach((to, from, next) => {  
      if (from.meta.keepAlive) {
        const $content = document.querySelector('.content'); // 列表的外层容器
        const scrollTop = $content ? $content.scrollTop : 0;
        console.log('scrollTop', scrollTop)
        from.meta.scrollTop = scrollTop;
      }
      next();
    });

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

      activated () {
        const scrollTop = this.$route.meta.scrollTop;
        const $content = document.querySelector('.content');
        if (scrollTop && $content) {
          $content.scrollTop = scrollTop;
        }
      },
  • 相关阅读:
    HUE配置HBase
    HUE配置HIVE
    HUE配置hadoop
    HUE的安装
    CM (Cloudera Manager) 的安装,便于CDH的离线部署
    MapReduce -- 最短路径
    Mapreduce -- PageRank
    CentOS 建立本地yum源服务器
    js移动设备手机跳转地址代码
    离线存储
  • 原文地址:https://www.cnblogs.com/qiufang/p/13183145.html
Copyright © 2011-2022 走看看