vue 实现滚动联动

实现滚动联动的方法

在Vue中实现滚动联动效果，可以通过监听滚动事件并同步多个容器的滚动位置。以下是几种常见的实现方式：

使用自定义指令

通过Vue自定义指令监听滚动事件，并同步滚动位置：

Vue.directive('sync-scroll', {
  bind(el, binding, vnode) {
    el.addEventListener('scroll', function() {
      const targets = document.querySelectorAll(binding.value)
      targets.forEach(target => {
        if(target !== el) {
          target.scrollLeft = el.scrollLeft
          target.scrollTop = el.scrollTop
        }
      })
    })
  }
})

使用方式：

<div v-sync-scroll="'.sync-target'"></div>

使用事件总线

通过Vue的事件总线机制实现组件间通信：

// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

// 组件A
mounted() {
  this.$refs.scrollContainer.addEventListener('scroll', () => {
    EventBus.$emit('scroll', {
      scrollTop: this.$refs.scrollContainer.scrollTop,
      scrollLeft: this.$refs.scrollContainer.scrollLeft
    })
  })
}

// 组件B
created() {
  EventBus.$on('scroll', ({scrollTop, scrollLeft}) => {
    this.$refs.scrollContainer.scrollTop = scrollTop
    this.$refs.scrollContainer.scrollLeft = scrollLeft
  })
}

使用Vuex状态管理

对于复杂应用，可以使用Vuex管理滚动状态：

// store.js
state: {
  scrollPosition: {
    top: 0,
    left: 0
  }
},
mutations: {
  updateScrollPosition(state, payload) {
    state.scrollPosition = payload
  }
}

// 组件
watch: {
  '$store.state.scrollPosition': {
    handler(newVal) {
      this.$refs.container.scrollTop = newVal.top
      this.$refs.container.scrollLeft = newVal.left
    },
    deep: true
  }
},
methods: {
  handleScroll() {
    this.$store.commit('updateScrollPosition', {
      top: this.$refs.container.scrollTop,
      left: this.$refs.container.scrollLeft
    })
  }
}

性能优化建议

滚动事件触发频繁，需要进行节流处理：

methods: {
  handleScroll: _.throttle(function() {
    // 同步滚动逻辑
  }, 50)
}

对于表格等复杂结构的联动滚动，可能需要考虑使用虚拟滚动技术提高性能。