vue 滚动加载

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

html

  
{{page}}
  

    
    

      
{{item}}
    
  

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;
    },
  },
})