原生js实现触底加载下一页

简单的布局

    <div id="app" class="container">
      <div class="block" v-for="(item, index) in blocks" :key="index">
        {{item}}
      </div>
    </div>

js需要先引入vue

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!',
      blocks: [1, 2, 3, 4]
    },
    created() {
      window.onload = _ => {
        const container = document.getElementById('app');
        console.log(container);
        container.addEventListener('scroll', e => {
          const {scrollTop:upOverHeight,clientHeight,scrollHeight:allHeight}=container;
          if(upOverHeight+clientHeight+10>allHeight){
            console.log('滚动到底')
            this.blocks.push(Math.random())
            this.blocks.push(Math.random())
            this.blocks.push(Math.random())
          }
          console.warn(container.scrollHeight,container.clientHeight, container.scrollTop);

        });
      };
    }
  });

样式

  #app {
    background-color: #fafafa;
    width: 100px;
    height: 500px;
    overflow: auto;
  }
  .block {
    background-color: white;
    width: 80px;
    line-height: 200px;
    height: 200px;
    margin: 10px;
    text-align: center;
  }