vue 利用@scroll实现滚动加载更多

页面:

<template>
    <div @scroll="listenScroll">  //可设置固定高度
        ···
    <div>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
          pagenum：1,
          pagesize: 10,
　　　　　　dataLIst:[]
        }
    },
　　mounted(){
　　　　this.getList();　　
　　},
    methods: {
       getList(){
           let param = {
              param: {
                pageNumber: _this.pagenum,
                pageSize: _this.pagesize
              }
            };
           ···  //获取数据，后台分页处理
　　　　　　　

　　　　　　　for (let i in list) {  //list为获取的数据列表
　　　　　　　　_this.dataList.push(list[i]);  //追加在已有数据后
　　　　　　　}

       },
       listenScroll(e) {  //监听滚动
          let ele = e.srcElement ? e.srcElement : e.target;
          if (ele.scrollTop + ele.offsetHeight > ele.scrollHeight - 100) { //监听滚动到div底部
            this.addMoreData();
          }
      },
      addMoreData() { //加载更多
        ···   //加载效果    
        ++_this.pagenum;
        _this.getList();
      },
    }
   }    
</script>