javascript 无限卷轴香草JS

Posted 2021-05-03

https://codepen.io/wernight/pen/YyvNoW

<ul class="infinite-list"></ul>

var listElm = document.querySelector('#infinite-list');

// Add 20 items.
var nextItem = 1;
var loadMore = function() {
  for (var i = 0; i < 20; i++) {
    var item = document.createElement('li');
    item.innerText = 'Item ' + nextItem++;
    listElm.appendChild(item);
  }
}

// Detect when scrolled to bottom.
listElm.addEventListener('scroll', function() {
  if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
    loadMore();
  }
});

// Initially load some items.
loadMore();

<script>

export default {
  data () {
    return {
      page: 1,
      // To avoid several calls in same moment
      now: null
    }
  },

  mounted () {
    this.setNowTime()

    if (process.browser) {
      window.addEventListener('scroll', this.handleScroll)
    }
  },

  destroyed () {
    if (process.browser) {
      window.removeEventListener('scroll', this.handleScroll)
    }
  },

  methods: {
    handleScroll () {
      const listElm = document.querySelector('.all-hours-section')

      if (window.scrollY + window.innerHeight >= listElm.scrollHeight) {
        if (this.isReadyLoad()) {
          this.loadMoreSlots()
          this.setNowTime()
        }
      }
    },

    setNowTime () {
      this.now = new Date().getTime()
    },

    isReadyLoad () {
      return new Date().getTime() - this.now > 1000
    },

    loadMoreSlots () {
      this.page += 1
      this.getSlots()
    }
  }
}
</script>