1.触底加载更多

  首先,注册一个滚动事件加载处理程序,获取到可视区域的高度,滚动的高度,以及可滚动文档的高度,判断 可滚动文档高度等于可视区域高度加滚动高度,如果相同,就可以判断它已经触底了,在这里调用一下请求列表的地址,获取到下一页的页数,以此类推下去,就可以实现触底加载更多。

 mounted(){
       window.addEventListener("scroll",this.scrollFn)
    },

methods:{
    async scrollFn(){
         //可视区域
        let clientHeight = document.documentElement.clientHeight - 18
        console.log(clientHeight);
         // 滚动文档高度
        let scrollHeight = document.body.scrollHeight
        console.log(scrollHeight);
         // 已滚动的高度
        let scrollTop = parseInt(document.documentElement.scrollTop)
        console.log(scrollTop);
        if (scrollTop + clientHeight == scrollHeight) {
          / **在这里请求接口**/
   }
}


2.触底后下一页没有数据,如何避免重复发送请求

 1.在data定义一个为 true 的布尔值当作判断条件,值为 false 时则 return 阻止事件 

2.获取到自己页面一页几条数据,判断 刷新出来的数据的长度,小于自己一页的数据长度时,让布尔值为false,就可以实现避免重复发送请求。

data(){
  return{
     tag:true
  }
 }
mounted(){
       window.addEventListener("scroll",this.scrollFn)
    },

methods:{
    async scrollFn(){
         //可视区域
        let clientHeight = document.documentElement.clientHeight - 18
        console.log(clientHeight);
         // 滚动文档高度
        let scrollHeight = document.body.scrollHeight
        console.log(scrollHeight);
         // 已滚动的高度
        let scrollTop = parseInt(document.documentElement.scrollTop)
        console.log(scrollTop);
        if (scrollTop + clientHeight == scrollHeight) {
          if(!this.tag) return
          / **在这里请求接口**/
           /**假设这里一页5条数据**/
         if(list.length < 5){
            this.tag = false
        }
   }
}

Logo

前往低代码交流专区

更多推荐