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%即可。