VUE 实现下拉分页加载更多功能

<template>
    <section class="dissection" id="dissection">     
      <div class="wraper" v-if="!nodata">
        <ul class="disList">
          <li v-for="(item,index) in discuzData">
           <img v-lazy="item.headUrl" class="namehead" alt="">
           <h2>{{item.memberName}} <span>{{item.createTime.substring(0,10)}}</span></h2>
           <div class="point"><span>评分</span>
           <img :src="a" v-for="(a,i) in item.point" alt="">
           </div>
           <div class="note">{{item.evaluation}}</div>
           <dl v-if="item.thumb.length>0">
             <dd v-for="(a,i) in item.thumb"><img v-lazy="a" alt=""></dd>            
           </dl>
           <div class="shop-reply" v-if="item.recoveryState==1">
             商家回复:{{item.recoveryDesc}}
           </div>
          </li>        
          <li class="lastm" v-if="!isFinish"><load-more tip="加载更多"></load-more></li>	
          <li class="lastm isfinish" v-if="isFinish"><load-more :show-loading="false" tip="没有更多数据了"></load-more></li>
        </ul>
      </div>
      <!-- 无内容 -->
      <div class="nodata" v-if="nodata">
         <p><img src="@/assets/images/shop/nodiscuz.png" alt=""></p>
         <h3>暂无评价信息</h3>
      </div>
    </section>
</template>
<script>
import api from '@/api/api'
import http from '@/util/http'
import util from '@/util/util'
import star1 from '@/assets/images/shop/star3@3x.png'
import star2 from '@/assets/images/shop/star@3x.png'
export default {   
   data(){
     return{
         nodata:false, //有无数据
         total:0, //评价总数
         totalPages:0, //总页
         discuzData:[], //评价列表                     
         isLoad:false,  //是否加载更多
         isFinish:false,//是否加载完成        
         query:{
            size:3,
            current:1,
         }
     }
   },   
   mounted(){     
      document.getElementById("dissection").addEventListener('scroll',this.discuzScroll); 
      this.getDiscuz();
   },
   methods:{    
      //下拉加载
      discuzScroll(){
         var dom = document.getElementById("dissection");
         var scrollTop    = dom.scrollTop; 
      　 var domHeight    = dom.offsetHeight;      
      　 var scrollHeight = dom.scrollHeight;
         var that = this;
      　 if(scrollHeight >= scrollTop + domHeight && !this.isLoad && !this.isFinish){ 
             that.isLoad = true;
             setTimeout(function(){           
                that.getDiscuz();
             },1000)
         }
      },

       //获取评价
      async getDiscuz(){
         const json = await http.request(api.getShopDiscuz,"get",this.query);
         if(json.data.returnCode==0){
           this.total = json.data.result.total; //总数
           this.totalPages = json.data.result.totalPages; //总页码           
           if(this.total==0){ 
              this.nodata = true; 
              return false;
           }         
           this.discuzData = this.discuzData.concat(json.data.result.rows); 
           if(this.query.current==this.totalPages){ 
               this.isFinish = true;               
           }else{    
               this.isLoad = false;
               this.query.current++; 
           }          
         }else{
           this.isLoad = false;
           this.$vux.toast.text(json.data.returnMsg);
         }
      },

   } 
}
</script>