当前位置：首页 > VUE

vue实现左右联动

2026-03-30 08:07:52VUE

Vue 实现左右联动效果

左右联动通常指两个独立滚动的容器（如列表）在滚动时保持同步。以下是实现方案：

监听滚动事件

在左右两个容器上绑定 scroll 事件，通过事件处理函数实现同步滚动。需注意避免事件循环触发。

vue实现左右联动

<template>
  <div class="container">
    <div class="left-list" ref="leftList" @scroll="handleLeftScroll">
      <!-- 左侧内容 -->
    </div>
    <div class="right-list" ref="rightList" @scroll="handleRightScroll">
      <!-- 右侧内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isScrolling: false
    }
  },
  methods: {
    handleLeftScroll() {
      if (this.isScrolling) return;
      this.isScrolling = true;
      const leftScrollTop = this.$refs.leftList.scrollTop;
      this.$refs.rightList.scrollTop = leftScrollTop;
      setTimeout(() => {
        this.isScrolling = false;
      }, 100);
    },
    handleRightScroll() {
      if (this.isScrolling) return;
      this.isScrolling = true;
      const rightScrollTop = this.$refs.rightList.scrollTop;
      this.$refs.leftList.scrollTop = rightScrollTop;
      setTimeout(() => {
        this.isScrolling = false;
      }, 100);
    }
  }
}
</script>

使用 CSS 同步高度

确保左右容器高度一致，滚动条才会同步：

vue实现左右联动

.container {
  display: flex;
  height: 100vh;
}
.left-list, .right-list {
  height: 100%;
  overflow-y: auto;
  flex: 1;
}

优化性能方案

对于大数据列表，可采用虚拟滚动技术（如 vue-virtual-scroller）减少 DOM 节点：

import { RecycleScroller } from 'vue-virtual-scroller';
export default {
  components: { RecycleScroller }
}

动态内容联动

若内容高度动态变化，需监听内容变化并重新计算：

export default {
  mounted() {
    new ResizeObserver(() => {
      this.$refs.rightList.scrollTop = this.$refs.leftList.scrollTop;
    }).observe(this.$refs.leftList);
  }
}