如何在scroll-view被动滚动时不触发scroll时间

在Vue.js中，如果你想要在`<el-scroll-view>`或类似组件的滚动事件停止后才执行某些操作，可以利用`v-once`指令配合`ref`属性以及`MutationObserver`。`v-once`会确保元素只渲染一次，然后你可以监听`$refs`对象上元素的变化，比如滚动位置变化。

首先，在模板中应用`v-once`：

<template>
  <el-scroll-view :ref="scrollView" v-once>
    <!-- ... -->
  </el-scroll-view>
</template>

然后，在脚本中获取`scroll-view`的引用并设置观察者：

<script>
export default {
  data() {
    return {
      scrollViewRef: null,
    };
  },
  mounted() {
    this.scrollViewRef = this.$refs.scrollView;
    // 创建一个MutationObserver实例
    const observer = new MutationObserver(this.handleScrollChange);
    // 观察元素的样式或者属性变化（如scrollTop）
    observer.observe(this.scrollViewRef.$el, { attributes: true, attributeFilter: ['style', 'scrollTop'] });
  },
  methods: {
    handleScrollChange(mutations) {
      // 当滚动停止（例如，用户释放鼠标滚轮或触控滑动结束）时，检查mutations
      if (mutations.some(mutation => mutation.type === "attributes" && mutation.attributeName === "scrollTop")) {
        // 这里执行你需要在滚动停止后执行的操作
        console.log('滚动已停止');
      }
    },
  },
};
</script>

在`handleScrollChange`方法中，你可以根据实际情况判断滚动是否真正停止，而不是仅依赖于`scrollTop`的改变。