vue下拉刷新 节流防抖

<template> 
<div   @touchmove="loading"> 下拉事件

</div>
</template>

在data里面定义
  data() {
    return {
       homeData: [],   页面所有数据
       pageIndex: 1,   页面下来的页数
       flag: true,         节流
    };
  },

  //页面下拉加载
    async loading() {
      console.log("页面滚动距离的高", document.documentElement.scrollTop);
      console.log("网页视口的高", window.screen.height);
      console.log("网页可见区域的高", document.body.offsetHeight);
      //思路:  滑动鼠标(页面滚动距离的高)+(网页视口的高 就是页面显示的高) 大于获取大于 (网页可见区域的高  - 30  是让他触发的条件)
      if ( document.documentElement.scrollTop + window.screen.height >= document.body.offsetHeight - 30) {
        if (this.flag) {  //判断条件
          this.flag = false;   
          let url =  "https://easy-mock.com/mock/5cb68c827ccf7c060b2270da/api/newgoods";
          await axios .get(url, {
              params: {
                page: ++ this.pageIndex 
              }
            }).then(res => {
              if (res.data.data.length == 0) {    //下拉到底触发
                this.flag = false
                return false;    //下拉到底无法在下拉记载
              }
              for (let i = 0; i < res.data.data.length; i++) {
                this.homeData.push(res.data.data[i]);
              }
              console.log(this.homeData);
              this.flag = true;
            }).catch(error => {
              console.log("下拉列表失败");
            });
        }
      }
    }