列表中点击进入下一页返回无法正确设置滚动高度

[cenxiaodong]

版本:^2.3.5

使用了keep-alive中，列表进入详情页，返回的时候，会有误差

<template>
  <div class="home">
    <virtual-list
      scrollable
      :page-mode="true"
      :data-key="'uid'"
      ref="virtual"
      :data-component="EmptyComponent"
      :data-sources="items"
    >
      <template #item="{ index, item }">
        <div class="_item" @click="jump">
          <div class="index">{{ index }}</div>
          <div class="left-pic">
            <img :src="item.img" alt="" />
          </div>
          <div class="right-info">
            <span>姓名：{{ item.name }}</span>
            <span>描述：{{ item.des }}</span>
            <span>标题：{{ item.title }}</span>
            <span>时间：{{ item.time }}</span>
          </div>
        </div>
      </template>
    </virtual-list>
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
import VirtualList from "vue-virtual-scroll-list";
export default {
  name: "home",
  data() {
    return {
      items: [],
      EmptyComponent: {},
      scrollTop: 0,
      fromPath:''
    };
  },
  components: {
    HelloWorld,
    components: { "virtual-list": VirtualList },
  },
  activated() {
    if(this.fromPath == '/about'){
      this.$refs.virtual.reset();
      this.$refs.virtual.scrollToOffset(this.scrollTop);
    }else{
      this.getData();
    }
  },
  created() {
    
  },
  methods: {
    getData() {
      for (let i = 0; i < 1000; i++) {
        this.items.push({
          uid: i,
          name: Math.random(),
          text: "hhhhhh",
          des: "描述",
          title: "标题",
          img: "https://thirdqq.qlogo.cn/ek_qqapp/AQE9ReDTODxicvQOEMSV8kZ1E9BxQt0FPnXSpDnK5AoQaZKKw4MiaVumgP90RS5A77n119EN3l/100",
          time: "2024/12/10",
        });
      }
    },
    jump() {
      this.$router.push({ path: "/about" });
    },
  },
  beforeRouteLeave(to, from, next) {
    try {
      this.scrollTop = this.$refs.virtual.getOffset();
      next();
    } catch (error) {
      next();
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.fromPath = from.path;
    });
  },
};
</script>
<style lang="less">
._item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid rgb(187, 167, 167);
  position: relative;
  .index {
    color: red;
    font-size: 20px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .left-pic {
    width: 100px;
    img {
      width: 100%;
    }
  }
  .right-info {
    padding-left: 20px;
    text-align: left;
    span {
      display: block;
      &:last-child {
        word-break: break-all;
      }
    }
  }
}
</style>

[learner-dhx]

same problem, how to resolve it?

[learner-dhx]

same problem, how to resolve it?

I resloved with this :

restoreList() {
  return new Promise((resolve, reject) => {
    if (this.$refs.vsl) {
      try {
        this.$refs.vsl.reset();
        this.setVirtualListToOffset(this.scrollTop);
        const top = this.$refs.vsl.$el.scrollTop;
        this.$refs.vsl.$el.scrollTop = top + 1;
        requestAnimationFrame(() => {
          this.$refs.vsl.$el.scrollTop = top;
          resolve();
          this.$toast.success('restore success');
        });
      } catch (error) {
        reject(error);
      }
    }
  });
},