Javascript 如何从Vue.js DOM中获取刚删除的元素的高度 我在Vue.js中有一个从索引0到49的项目列表 我展示了由startIndex和endIndex控制的这些项目的子集 当我将startIndex增加到1时，将显示1-49中的项，0将从DOM中删除 如何获取刚刚删除的0的高度 另外，如果我编辑endIndex，如何获取刚刚添加的项目的高度

HTML

<script type="text/x-template" id="virtual-list">
  <div id="root" ref="root">
    <div id="viewport" ref="viewport">
      <div id="spacer" ref="spacer" :style="spacerStyle">
        <div v-for="i in visibleItems" :key="i.index" :id="i.index" class="list-item">
          {{i.value}}
  </div>
  </div>
  </div>
  </div>
</script>

<div id="app">
  <button @click="incrementStart">Start +</button>
  <button @click="decrementStart">Start -</button>
  <button @click="incrementEnd">End +</button>
  <button @click="decrementEnd">End -</button>
  <virtual-list></virtual-list>
</div>

Vue.js

const PAGE_SIZE = 50;

const items = new Array(PAGE_SIZE).fill(null).map((item, index) => {
  return {
    id: faker.random.uuid(),
    index: index,
    value: "Item " + index + " " + faker.random.words(index % 25)
  };
});

const bus = new Vue({});

Vue.component("virtual-list", {
  template: "#virtual-list",
  data() {
    return {
      isMounted: false,
      items,
      startIndex: 0,
      endIndex: PAGE_SIZE,
      scrollTop: 0,
      translateY: 0,
      scrollDirection: 0
    };
  },
  computed: {
    visibleItems() {
      return this.items.slice(this.startIndex, this.endIndex);
    },
    /**
    Translate the spacer verticaly to keep the scrollbar intact
    We only show N items at a time so the scrollbar would get affected if we dont translate
    */
    spacerStyle() {
      return {
        willChange: "auto",
        transform: "translateY(" + this.translateY + "px)"
      };
    }
  },
  methods: {
    handleScroll() {
      this.scrollTop = this.$el.scrollTop;
      this.startIndex = Math.floor(this.scrollTop / 42);
    }
  },
  watch: {
    scrollTop(newValue, oldValue) {
      if (newValue > oldValue) {
        this.scrollDirection = 1;
      } else if (newValue < oldValue) {
        this.scrollDirection = -1;
      }
    },
    startIndex(newValue, oldValue) {
      // console.log(this.$refs.spacer.children);
    }
  },
  beforeUpdate() {
    // console.log('before update', this.$refs.spacer.children);
  },
  mounted() {
    this.isMounted = true;
    const children = this.$refs.spacer.children;
    for (let i = 0; i < children.length; i++) {
      // console.log(children[i].offsetTop - this.$el.offsetTop);
      children[i].setAttribute("data-height", children[i].scrollHeight);
    }

    bus.$on("incrementStart", () => {
      this.startIndex++;
    });
    bus.$on("decrementStart", () => {
      this.startIndex--;
    });
    bus.$on("incrementEnd", () => {
      this.endIndex++;
    });
    bus.$on("decrementEnd", () => {
      this.endIndex--;
    });

    this.$el.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    this.$el.removeEventListener("scroll", this.handleScroll);
  }
});

new Vue({
  el: "#app",
  methods: {
    incrementStart() {
      bus.$emit("incrementStart");
    },
    decrementStart() {
      bus.$emit("decrementStart");
    },
    incrementEnd() {
      bus.$emit("incrementEnd");
    },
    decrementEnd() {
      bus.$emit("decrementEnd");
    }
  }
});

const PAGE_SIZE=50；
常量项=新数组（页面大小）。填充（空）。映射（（项，索引）=>{
返回{
id:faker.random.uuid（），
索引:索引,，
值：“项目”+索引+“”+伪造。随机。单词（索引%25）
};
});
const bus=新的Vue（{}）；
组件（“虚拟列表”{
模板：“#虚拟列表”，
数据（）{
返回{
isMounted:错，
项目，
startIndex:0，
endIndex：页面大小，
滚动顶端：0，
translateY:0，
滚动方向：0
};
},
计算：{
visibleItems（）{
返回this.items.slice（this.startIndex，this.endIndex）；
},
/**
垂直平移间隔棒以保持滚动条完整
我们一次只显示N个项目，因此如果我们不翻译，滚动条将受到影响
*/
间隔样式（）{
返回{
意志改变：“自动”，
转换：“translateY”（+this.translateY+“px）”
};
}
},
方法：{
handleScroll（）{
this.scrollTop=this.$el.scrollTop；
this.startIndex=Math.floor（this.scrollTop/42）；
}
},
观察：{
scrollTop（新值、旧值）{
如果（新值>旧值）{
这个方向=1；
}else if（新值<旧值）{
this.scrollDirection=-1；
}
},
startIndex（新值、旧值）{
//console.log（这个$refs.spacer.children）；
}
},
更新之前（）{
//log（'before update'，this.$refs.spacer.children）；
},
安装的（）{
this.isMounted=true；
const children=this.$refs.spacer.children；
for（设i=0；i{
这个.startIndex++；
});
总线。$on（“decrementStart”，（）=>{
这个.startIndex--；
});
总线.$on（“递增结束”，（）=>{
这个.endIndex++；
});
总线。$on（“递减”，（）=>{
此.endIndex--；
});
此.$el.addEventListener（“滚动”，此.handleScroll）；
},
销毁（）{
此.el.removeEventListener（“滚动”，此.handleScroll）；
}
});
新Vue({
el:“应用程序”，
方法：{
递增开始（）{
总线$emit（“增量启动”）；
},
递减开始（）{
总线$emit（“递减启动”）；
},
递增结束（）{
总线。$emit（“incrementEnd”）；
},
递减{
总线。$emit（“递减”）；
}
}
});

我认为最好是计算那些孩子的容器div的高度

您可以使用

element.getBoundingClientRect（）.height

要访问元素，您可以为该div分配一个ref，并像这样访问该div

this.$refs.containerDiv.getBoundingClientRect（）.height

之后，您可以在旧值和新值之间进行比较，以了解它减少/增加了多少

const PAGE_SIZE = 50;

const items = new Array(PAGE_SIZE).fill(null).map((item, index) => {
  return {
    id: faker.random.uuid(),
    index: index,
    value: "Item " + index + " " + faker.random.words(index % 25)
  };
});

const bus = new Vue({});

Vue.component("virtual-list", {
  template: "#virtual-list",
  data() {
    return {
      isMounted: false,
      items,
      startIndex: 0,
      endIndex: PAGE_SIZE,
      scrollTop: 0,
      translateY: 0,
      scrollDirection: 0
    };
  },
  computed: {
    visibleItems() {
      return this.items.slice(this.startIndex, this.endIndex);
    },
    /**
    Translate the spacer verticaly to keep the scrollbar intact
    We only show N items at a time so the scrollbar would get affected if we dont translate
    */
    spacerStyle() {
      return {
        willChange: "auto",
        transform: "translateY(" + this.translateY + "px)"
      };
    }
  },
  methods: {
    handleScroll() {
      this.scrollTop = this.$el.scrollTop;
      this.startIndex = Math.floor(this.scrollTop / 42);
    }
  },
  watch: {
    scrollTop(newValue, oldValue) {
      if (newValue > oldValue) {
        this.scrollDirection = 1;
      } else if (newValue < oldValue) {
        this.scrollDirection = -1;
      }
    },
    startIndex(newValue, oldValue) {
      // console.log(this.$refs.spacer.children);
    }
  },
  beforeUpdate() {
    // console.log('before update', this.$refs.spacer.children);
  },
  mounted() {
    this.isMounted = true;
    const children = this.$refs.spacer.children;
    for (let i = 0; i < children.length; i++) {
      // console.log(children[i].offsetTop - this.$el.offsetTop);
      children[i].setAttribute("data-height", children[i].scrollHeight);
    }

    bus.$on("incrementStart", () => {
      this.startIndex++;
    });
    bus.$on("decrementStart", () => {
      this.startIndex--;
    });
    bus.$on("incrementEnd", () => {
      this.endIndex++;
    });
    bus.$on("decrementEnd", () => {
      this.endIndex--;
    });

    this.$el.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    this.$el.removeEventListener("scroll", this.handleScroll);
  }
});

new Vue({
  el: "#app",
  methods: {
    incrementStart() {
      bus.$emit("incrementStart");
    },
    decrementStart() {
      bus.$emit("decrementStart");
    },
    incrementEnd() {
      bus.$emit("incrementEnd");
    },
    decrementEnd() {
      bus.$emit("decrementEnd");
    }
  }
});