无限滚动 vuejs 不止一次被触发

Question

我正在尝试在我的 vue chrome 扩展中实现无限滚动。我有这段代码，但问题是当到达页面底部时，多次触发 ajax 获取新数据的调用。我该如何解决？

  mounted() {
    this.$store.commit('preloader', false)
    window.onscroll = () => {
      if( window.scrollY + window.innerHeight >= document.body.scrollHeight ){
        console.log('fired')
        this.nextPageLoaded = false 
        this.nextPage()
      }
    }
  },
  methods: {
    nextPage() {
      console.log('Loading next page')
      axios.get('https://localhost:8080/api/media')
      .then( (response) => {
        console.log(response.data)
        this.$store.commit('profileMedia', response.data.media)
        this.nextPageLoaded = true
      })
    }
  }

我试过在加载数据后将变量 nextPageLoad 设置为 true，当滚动事件到达底部但未按预期工作时设置为 false。任何解决方案将不胜感激

Answer 1

也许这是一个拼写错误，但我没有看到您实际上在 if 语句中使用 nextPageLoaded 属性作为标志。

应该是这样的

mounted() {
  this.$store.commit('preloader', false)
  window.onscroll = () => {
    if ( (window.scrollY + window.innerHeight >= document.body.scrollHeight)  
          && !this.nextPageLoaded) {
      console.log('fired')
      this.nextPageLoaded = true 
      this.nextPage()
    }
  }
},
methods: {
  nextPage() {
    console.log('Loading next page')
    axios.get('https://localhost:8080/api/media')
      .then( (response) => {
        console.log(response.data)
        this.$store.commit('profileMedia', response.data.media)
        this.nextPageLoaded = false
      })
  }
}

还请记住，我切换了 nextPageLoaded 属性赋值的值，因为我认为这样更直观（触发 [=15 后立即赋值给 true =] 方法，在 AJAX 调用结束后分配给 false。

无限滚动 vuejs 不止一次被触发

Infinite scroll vuejs fired more than once

javascript

ajax

vue.js

infinite-scroll