vue中使用@scroll實現分頁處理(分頁要做節流處理)

監聽@scrll滾動條事件
<div class="hhhh" @scroll="page($event)">
    <div>所要滾動的內容</div>
</div>    

設置一個開關為分頁節流做處理（不節流回一次加載多個page次數）

data(){
return{
falg:true
}
}

 

在methods中做分頁處理：

 methods: {
created(){
this.List()
}
        
    async List(){
    
const result = await this.$api.bbb(this.page, this.pageSize);
if(resulit){
//請求數據成功
this.list=[...this.list,...result.data]
//分頁節流判斷
this.falg=false
}else{
//請求失敗
}

}
//分頁處理
  page(e) {
        let Scroll = e.target;
        let scrollHeight = Scroll.scrollHeight - Scroll.clientHeight;
        if (scrollHeight - Scroll.scrollTop < 100 && !falg) {
           this.falg = true;
          this.page++;
          this.List();
        }
    },

}    

分頁的節流：設置一個開關，如果為false時進入觸發page++，執行List（），並且觸發前設置開關為true，並且在List（）函數里設置開關為false，（開關為true不能執行分頁，為false執行分頁）