无限下拉加载与节流

 

 created() {
    this.getlist();
    window.addEventListener("scroll", this.addMore);    //这里是无线下拉加载使用
  },
  watch: {
    addMore(){}
  },

  methods: {  
      //无线下拉加载
        addMore() {
        let scrollTop = window.pageYOffset  ||
         document.documentElement.scrollTop ||
        document.body.scrollTop; //卷的Y 浏览器兼容
      let screenH = window.screen.height; //视口Y
         let pageH = document.body.scrollHeight; //页面Y
      console.log(scrollTop, screenH, pageH);
      if (scrollTop + screenH + 20 > pageH) {
        console.log("到底了");
        if (this.flag) {
          this.pageNum++;
          this.flag = false;
         this.getlist(this.pageNum)
        }
      }
    },

    //获取商品列表
    getlist(pageNum) {
      let url = "/product/list?pageNum=" + pageNum;
      this.$axios
        .get(url)
        .then(res => {
          this.flag=true;
          this.commodity = this.commodity.concat(res.list); //concat当在无线下拉加载的时候获取到1页数据，如果你在做无线下拉加载的时候，就需要将原来的第一页连接在一起，不然会被后面加载的数据给覆盖了.
          console.log(res);
             if (res.list.length===0) {   //节流
              console.log(res.list.length)
              console.log("解绑");
              window.removeEventListener("scroll", this.addMore);
            }
        })
        .catch(err => {
          console.log(err);
        });
    }
}