vue中使用@scroll实现分页处理(分页要做节流处理)

Posted 2020-12-01 angiy

监听@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执行分页）