Question

案例： 我正在网站上进行无限滚动，当表格的底部从其外部到达视口的底部时，该表格必须加载更多的行）

代码为此，首先，我在数据中设置了windowHeight变量，然后在创建的生命钩中将其设置为window.innerheight，并在window对象上添加了一个调整大小的事件监听器，将windowHeight变量设置为cuirrent window.innerheight，例如这个：

data() {
  return {
    windowHeight: 0,
  }
}

created() {
  this.windowHeight = window.innerHeight;
  window.addEventListener('resize', () => {
    this.windowHeight = window.innerHeight
  })
}

然后我设置了一个名为topRect的变量并将其设置为div的topRect，该div放置在模板上表格的后面，因此当该元素的topRect小于窗口内部高度时，它必须触发一种方法来加载更多数据，我已经这样做：

脚本

data() {
  return {
    windowHeight: 0,
    topRect: 0,
    divAfterTable: '',
  }
}

created() {
  this.windowHeight = window.innerHeight;
  window.addEventListener('resize', () => {
    this.windowHeight = window.innerHeight
  })
}

mounted() {
  this.divAfterTable = document.querySelector(#div-after-table)
  this.topRect = this.divAfterTable.getBoundingClientRect().top;
  window.addEventListener('scroll', this.setClientRect)
  })
}

methods: {
  setClientRects() {
    this.topRect = this.divAfterTable.getBoundingClientRect().top;
  }
}

模板

<template>
  <div class="table">
    <div class="table__container">
      <table class="table__fixture">
        <thead>
          <tr>
            <td>col 1</td>
            <td>col 2</td>
            <td>col 3</td>
          </tr>
        </thead>
        <tbody>
          <tr v-if="tableData.data" v-for="row in tableData" :key="row.id">
            <td>{{row.colOne}}</td>
            <td>{{row.colTwo}}</td>
            <td>{{row.colThree}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div id="div-after-table"></div>
  </div>
</template>

该功能的其余代码无关。

预期行为：

setClientRect方法应该在滚动时触发并更新topRect变量，但是不会，它只是在调整窗口大小时触发，奇怪的是我在控制台中放了console.log（'it works'）。 setClientRects方法是这样的：

methods: {
  setClientRects() {
    this.topRect = this.divAfterTable.getBoundingClientRect().top;
  }
}

它被记录下来，但是除非我调整窗口大小，否则其余方法将无法正常工作

奇怪的行为和可能有用的数据：

我在项目中的组件具有中等复杂的结构，因此我必须将其应用于两个不同的组件，奇怪的是我在一个组件上工作得很好，但在另一个组件上却没有是，将不起作用的组件呈现在已经在另一个路由器视图（这是子路由）中的路由器视图内，该组件具有以下结构：

<Root>
  <App>
    <Navbar>
    <News> router-view: /news <-- HERE IT WORKS

<Root>
  <App>
    <Navbar>
    <League> router-view: /league 
      <Statistics> router-view /league/statistics <-- HERE IT DOESN'T

如果您需要更多信息，请告诉我

Answer 1

不确定，但是我看到您在这里使用document.querySelector，有没有原因不使用您的原因：

this.$el.querySelector

您当然也可以使用Vue Refs，但也许我误解了您的问题。

DOM.getBoundingClientRect不会在窗口滚动事件上触发，但会在调整[Vuejs]大小时触发

1 个答案: