vueマウスを使ってデータをスクロールしてロードする例

マウスでどこかの位置にスクロールするとデータをロードします。このようなシーンと業務の需要はますます多くなりました。今は「vue.js実戦」の作者の解決策を分析します。
1.データがロードされているかどうかを判断するためのフラグビットを設定します。
2.スクロールエリアをoverfow:atotに設定する（スクロールバーを表示する）
3.スクロール領域に傍受イベントを追加し、ref属性をバインドしてDOMのインスタンスを取得する
4.マウスが最後までスクロールした時、データをロードする
4.1この時点でフラグビットがtrueであればそのまま終了し、この時のデータローディングを行わない
キーコードは以下の通りです。

<template>
  //...    
// div       
<div class="daily-list" ref="list" @scroll="handleScroll">
  // ...
</div>
</template>
<script>
 export default{
   data(){
    return {
      recommendList:[], //            
      isLoading:false //         
    }
  },
  methods:{
    //    
    getRecommendList(){
        //        
      this.isLoading=true;
      $.ajax.get('news/before/'+preDay).then(res=>{
        this.recommendList.push(res);
        //      
        this.isLoading=false;
      })
    },
    handleScroll(){
      const $list=this.$refs.list;
        //                
      if(this.isLoading) return; 
      //                       ,        
      //scrollTop           
      // clientHeight         
      // scrollHeight         
     if($list.scrollTop+document.body.clientHeight>=$list.scrollHeight){
   this.getRecommendList();
   }
    }
  },
  mounted(){
    this.getRecommendList()
  }
}
</script>
<style>
  width: 300px;
  position: fixed;
  top:0;
  left: 150px;
  //     
  overflow: auto;
</style>

以上のこのvueはマウスを使ってデータをスクロールしてロードした例は小編集が皆さんに提供した内容の全部です。参考にしてもらいたいです。どうぞよろしくお願いします。