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
        }
   }
}