Vue.js：如何更新元素的位置

Question

我想在滚动时移动一个元素，以便该元素始终在屏幕中。 但是位置没有更新。

我正在做的是这个。

<v-card class="item" :style="{ top: distance }">
</v-card>
...
data() {
  return {
    distance: 0,
  }
}
methods: {
  handleScroll() {
    this.distance = window.scrollY
    },
  },
  created() {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
}

...

.item {
  position: absolute;
}

我该怎么做？

Answer 1

你的元素应该有一个绝对位置，并添加@Nikos提到的单位：

  <v-card class="item" style="position:absolute" :style="{ top: distance+'px' }">
  </v-card>