vue滑动分页加载数据

vue滑动分页加载数据

  data() {
      return {
        date: "",
        week: "",
        list: null,
        loading: false,
        total: 0,
        hasMore: true,
        listQuery: {
          page: 1,
          size: 10
        },
      };
    },
  beforeDestroy() {
      console.log("触发：beforeDestroy")
      window.removeEventListener("scroll", this.handleScroll());
    },
    created() {

       console.log("触发：created")
      this.fetchData();
      window.addEventListener("scroll", this.handleScroll,true);
    },
    methods: {
      async fetchNewData() {
        this.loading = true;
        try {
          var vm = this;
          this.axios({
            method: 'post',
            url: 'http://localhost:7003/llcBk/web/page',
            data: {
              "page": ++vm.listQuery.page,
              "size": vm.listQuery.size
            }
          }).then(function(response) {
            console.log("触发fetchNewData()方法："+response.data)
            if (response.data.data.list.length === 0) {
              vm.hasMore = false;
              vm.listQuery.page--;
            } else {
              vm.list =vm.list.concat(response.data.data.list);
              vm.listQuery.page=response.data.data.page,
              vm.listQuery.size=response.data.data.size,
              vm.total = response.data.data.total
            }
            vm.loading = false;
          })
        } catch (e) {
          this.$message.error(e.Msg);
        }
      },
      handleScroll() {
        console.log("触发handleScroll()方法")
        const scrollTop = document.documentElement.scrollTop;
        const scrollHeight = document.documentElement.scrollHeight;
        const clientHeight = document.documentElement.clientHeight;
        const temp = clientHeight + Math.floor(scrollTop);
        if (this.hasMore) {
          if (
            temp === scrollHeight ||
            temp === scrollHeight + 1 ||
            temp === scrollHeight - 1
          ) {
            if (!this.loading) {
              this.fetchNewData();
            }
          }
        }
      },
      // 获取博客数据
      async fetchData() {
        var vm = this;
        this.axios({
          method: 'post',
          url: 'http://localhost:7003/llcBk/web/page',
          data: {
            "page": vm.listQuery.page,
            "size": vm.listQuery.size
          }
        }).then(function(response) {
            console.log("触发fetchData()方法："+response.data.data.list),
            vm.list = response.data.data.list,
            vm.listQuery.page=response.data.data.page,
            vm.listQuery.size=response.data.data.size,
            vm.total = response.data.data.total
        })
      }
    },