vue-virtual-scroller滚动时列表项突然错位怎么解决？

遇到这种情况我一般会先检查图片加载是否影响了布局计算。因为vue-virtual-scroller需要准确知道每个item的高度，而图片异步加载会导致实际高度变化。

你可以试试这几个改动：

1. 给图片加上固定高度样式。比如在thumbnail类里设置height: 50px，这样不管图片是否加载完成都能保持高度一致

2. 使用vue-virtual-scroller提供的use-is属性。把div换成
3. 关键是监听图片加载完成事件，通知虚拟滚动组件重新计算布局。可以这样改写模板：


如果数据量特别大，还可以考虑给每个item加个v-if控制渲染区域。不过我之前遇到类似问题，发现图片加载才是罪魁祸首，加上这三个改动后应该能解决错位问题

这个问题我遇到过，主要是因为图片加载会导致高度计算不准确，从而引发错位。下面给你一步步解决：

1. **图片加载问题**：图片在异步加载时可能会改变实际高度，而vue-virtual-scroller依赖预估的高度来计算滚动位置。所以需要确保图片加载完成后通知组件重新计算高度。

2. **使用resize-observer**：可以通过监听每个item的高度变化来动态调整。这里推荐用ResizeObserver来检测图片加载后的高度变化。

3. **调整代码**：先安装resize-observer-polyfill以兼容老浏览器：
npm install resize-observer-polyfill

然后修改代码如下：

<template>

  <v-virtual-scroller :items="items" :estimate-size="80" :scroll-class="'custom-scroll'">

    <div slot-scope="{ item }" class="item" ref="item">

      <img :src="item.image" @load="onImageLoad($event, item)" class="thumbnail">

      <p>{{ item.text }}</p>

    </div>

  </v-virtual-scroller>

</template>



<script>

import ResizeObserver from 'resize-observer-polyfill';



export default {

  data() {

    return {

      items: Array.from({ length: 2000 }, (_, i) => ({

        image: https://via.placeholder.com/80x80?text=Item${i},

        text: Item ${i}

      })),

      observer: null

    };

  },

  mounted() {

    this.observer = new ResizeObserver(entries => {

      for (let entry of entries) {

        const item = entry.target;

        // 这里需要注意：触发更新高度的逻辑

        if (item.__vue__) {

          item.__vue__.$forceUpdate();

        }

      }

    });



    this.$nextTick(() => {

      this.$refs.item.forEach(el => this.observer.observe(el));

    });

  },

  beforeDestroy() {

    if (this.observer) {

      this.observer.disconnect();

    }

  },

  methods: {

    onImageLoad(event, item) {

      // 图片加载完成后触发观察器重新测量

      this.observer.observe(event.target.parentElement);

    }

  }

};

</script>

4. **CSS部分**：确保样式不影响高度计算：

.item {

  display: flex;

  align-items: center;

  height: auto; /* 改为auto让图片决定高度 */

  padding: 5px;

}



.thumbnail {

  width: 80px;

  height: 80px; /* 固定大小避免拉伸 */

}

5. **原理说明**：vue-virtual-scroller通过estimate-size预估每个item的高度，但图片加载可能改变实际高度。通过ResizeObserver实时监听高度变化，并调用$forceUpdate通知组件重新计算滚动位置。

6. **其他建议**：如果图片尺寸不固定，可以考虑提前获取所有图片的实际高度并传入组件作为variable-sizes参数，这样能更精确地计算滚动位置。

试试这个方案，应该能解决你的问题了。要是还有异常，记得告诉我具体场景！