tab栏切换以及路由切换保存 滚动条的位置

Question

插件使用的Better-Scroll
组件库 vant

第一次(首次进入)点击tab栏 进行加载
第二次点击tab栏 不用重新获取数据，返回到上次停留的位置

进行页面跳转,,使用keep-alive实现页面的缓存，再次进入首页，偶尔会出现失去滚动条的情况，

Answer 1

你可以通过以下步骤来解决页面跳转后失去滚动条的问题：

在 Better-Scroll 的初始化代码中，将 scrollY 和 probeType 参数设置为 true。这样可以监听滚动事件并实时更新滚动条。

在 activated 钩子函数中，在执行其他操作之前，使用 this.$nextTick() 方法等待组件渲染完成，并手动刷新 Better-Scroll 实例。例如：


```c
activated() {
  this.$nextTick(() => {
    this.scroll.refresh();
  });
}

在 deactivated 钩子函数中，手动销毁 Better-Scroll 实例。例如：


```c
javascript
Copy
deactivated() {
  this.scroll.destroy();
}

下面是一个示例代码，其中包含了一个使用 Better-Scroll 和 keep-alive 的页面组件：


```c
html
Copy
<template>
  <keep-alive>
    <div>
      <div ref="wrapper" class="wrapper">
        <div class="content">
          <!-- 内容 -->
        </div>
      </div>
    </div>
  </keep-alive>
</template>

<script>
import BScroll from "better-scroll";

export default {
  name: "MyComponent",
  data() {
    return {
      scroll: null,
    };
  },
  activated() {
    this.$nextTick(() => {
      this.scroll && this.scroll.refresh();
    });
  },
  deactivated() {
    this.scroll && this.scroll.destroy();
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper, {
      scrollY: true,
      probeType: 3,
      // 其他配置项
    });
  },
};
</script>

<style scoped>
.wrapper {
  height: 100%;
  overflow: hidden;
}
.content {
  min-height: 100%;
  /* 其他样式 */
}
</style>

在上面的代码中，我们在页面组件的 data 中定义了一个 scroll 属性，用于存储 Better-Scroll 实例。在 mounted 钩子函数中，使用 new BScroll() 创建 Better-Scroll 实例并将其存储到 scroll 属性中。在 activated 钩子函数中，使用 this.$nextTick() 方法等待组件渲染完成，并调用 refresh() 方法刷新 Better-Scroll 实例。在 deactivated 钩子函数中，调用 destroy() 方法销毁 Better-Scroll 实例。

需要注意的是，如果在页面组件中使用了 keep-alive 并且开启了缓存，那么页面组件在第一次加载时只会执行一次 mounted 钩子函数，之后每次进入或离开页面时会触发 activated 和 deactivated 钩子函数。因此，在使用 keep-alive 时，需要确保 mounted 钩子函数中的代码只执行一次，并正确处理页面缓存的情况。

```
回答整理自chatgpt，如果能够解决麻烦采纳一下，谢谢啦