vue 滚动加载

在线demo：https://codepen.io/peachLin/pen/XVMgWz

html

<dvi id="app">
  <p>{{page}}</p>
  <div class="items" @scroll="onScroll($event)">
    <!--   1500px初始高度 50px没一栏高度   -->
    <div style="height: 1500px" :style="{'padding-top': `${page * 50}px`}">
      <li v-for="(item, index) in showData">{{item}}</li>
    </div>
  </div>
</dvi>

scss

.items{
  height: 500px;
  background-color: #ccc;
  overflow-y: auto;
  li{
    height: 49px;
    border-bottom: 1px solid #000;
  }
}

js

var datas = [];
for (var i = 0; i< 100; i++) {
  datas.push(i);
}
new Vue({
  el: '#app',
  data () {
    return {
      datas: datas,
      page: 0
    }
  },
  computed: {
    showData() {
      if (30 + this.page > this.datas.length) {
          this.page = this.datas.length-30
      }
      return this.datas.slice(this.page, 30 + this.page);
    },
  },
  methods: {
    onScroll() {
      // const offsetHeight = event.currentTarget.offsetHeight;
      // const scrollHeight = event.target.scrollHeight;
      const scrollTop = event.target.scrollTop; // 滚动条位置
      // const scrollBottom = offsetHeight + scrollTop;
      // console.log(offsetHeight, scrollHeight, scrollTop, scrollBottom);
      // 每次加载10个
      this.page = Math.floor(scrollTop / 500) * 10;
    },
  },
})