keep-alive的使用，keep-alive保存滚动条位置。

1、keep-alive是Vue提供给我们一个内置组件，会缓存不活动的组件实例，而不是销毁它们，作为标签使用包裹在需要缓存的组件外

2、在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

3、作用：比如列表页面进入详情，我们想保存列表滚动的位置，我们就可以使用keep-alive保存列表页面的滚动位置。

4、组件使用keep-alive以后会新增两个生命周期 actived() deactived()

activated 被缓存的组件激活时调用。

deactivated 缓存组件停用时调用。

<template>
  <div class="maxBox">
    <div ref="list" @scroll="alive" class="content-list">
      <li v-for="(v, i) in 100" :key="i">{
   
   { v }}</li>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      scrollPages: 0, // 缓存当前滚动条的位置
    };
  },
  mounted() {},
  methods: {
    alive(e) {
      console.log(e.target.scrollTop);
     // 获取页面滚动条的位置
      this.scrollPages = e.target.scrollTop; 
    },
  },
  activated() {
    // 缓存组件激活时调用
    this.$refs.list.scrollTop = this.scrollPages; // 获取 dom 的scrollTop = 缓存的滚动条位置
  },
};
</script>

<style lang="scss">
.maxBox {
  width: 100%;
  height: 100%;
}
.content-list {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  li {
    width: 100%;
    height: 20px;
    background-color: #ccc;
    margin: 20px 0;
    display: flex;
  }
}
</style>

app.vue

<template>
  <div id="app">
    <!-- include 指定要缓存的页面， Home 页面要有配置name:Home。 
     要想缓存多个以 , 分割后面跟组件名字  -->
    <!-- exclude 指定不需要缓存的页面 -->
    <keep-alive include="Home,About">
      <router-view />
    </keep-alive>

    <!-- 数组 -->
    <!-- <keep-alive :include="['Home','About']">
      <router-view />
    </keep-alive> -->

    <!-- 正则 -->
    <!-- <keep-alive :include="/Home|About/">
      <router-view />
    </keep-alive> -->

    <footer>
      <router-link to="/">页面一</router-link>
      <router-link to="/About">页面二</router-link>
    </footer>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {},
  components: {},
};
</script>
<style lang="scss">
// 要给父元素设置高100%否则不生效
body,
html,
#app {
  width: 100%;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
li {
  list-style: none;
}

footer {
  width: 100%;
  height: 40px;
  border-top: 1px solid #ccc;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  left: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>

莫等闲白了少年头空悲切 - s - z -h

keep-alive的使用，keep-alive保存滚动条位置。

猜你喜欢