让页面元素的滚动位置保持不变，使用keep-alive实现

2023-11-17 14:10:47

Vue.js 中的 keep-alive 组件是一个特殊的组件，它可以缓存住被包含在它内部的组件的状态，当组件切换的时候，可以让这个被缓存组件的状态不被销毁。这在某些情况下非常有用，例如当你想保存滚动条的位置时。

keep-alive 的使用很简单，只需将你想缓存状态的组件包裹在一个 keep-alive 组件中即可。

<keep-alive>
  <component-a />
</keep-alive>

当 component-a 组件切换时，它的状态将被缓存住，并且当它再次切换回来时，它的状态将被恢复。

在Vue.js中，activated钩子用于在组件被激活时调用，这可以通过将滚动位置存储到一个数据变量中来实现。

export default {
  data() {
    return {
      scrollTop: 0
    }
  },
  activated() {
    this.scrollTop = document.documentElement.scrollTop
  },
  deactivated() {
    document.documentElement.scrollTop = this.scrollTop
  }
}

然后，您可以在模板中使用scrollTop数据变量来设置元素的scrollTop属性。

<div ref="container" style="height: 100px; overflow: scroll">
  <p>...</p>
</div>

export default {
  data() {
    return {
      scrollTop: 0
    }
  },
  activated() {
    this.scrollTop = this.$refs.container.scrollTop
  },
  deactivated() {
    this.$refs.container.scrollTop = this.scrollTop
  }
}