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

 

页面:

<template>
　　<div id="d-whole">
　　　　 <div id="d-top">  //顶部固定区域
　　　　　　　···  
　　　　</div>

    　　<div id="d-scroll" :style="obj" @scroll="listenScroll">  //滚动区域
      　　  ···
    　　<div>
　　</div>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
　　　　　　winHei: screen.availHeight, //屏幕高度
          obj:{
　　　　　　　　height: 0
　　　　　　},
　　　　　　pagenum：1,
          pagesize: 10,
　　　　　　dataLIst:[]
        }
    },
　　mounted(){

　　　　　let topH = document.getElementById('d-top').offsetHeight; //获取顶部区域高度
　　　　　this.obj.height = (this.winHei - topH) + 'px'; //动态修改滚动区域高度

　　　　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>    

小问题：当"d-scroll"为固定高度时，滚动到底部时会联动"d-whole"滚动，因为我一开始未设置的"d-whole"的高度，此时屏幕高度已超过100%。

解决方法:  将"d-whole"的css高度设为100%即可。