crowd-test-service-frontend/src/components/Square.vue

<template>
  <div class="square-container">
    <div class="title">全部任务</div>

    <div class="square-list-container">
      <task-item v-for="(item,index) in list" :key="index" :task="item" />
      <div v-if="loading" class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div v-if="nomore" class="nomore">没有更多</div>
    </div>
  </div>
</template>

<script>
import TaskItem from "@/components/commons/TaskItem";
import Http from '@/js/http.js';
import Apis from '@/js/api.js';
import {notify} from '@/constants/index'
export default {
  name: "Square",
  components: { TaskItem },
  data() {
    return {
      loading: true,
      nomore:false,
      list: [],
    };
  },
  mounted() {
    window.addEventListener("scroll", this.throttle(this.setpage, 1000), false);
  },
  created() {
    this.loadData()
  },
  methods: {
    throttle(func, wait, options) {
      let context, args, result;
      let timeout = null;
      let previous = 0;
      if (!options) options = {};
      let later = function() {
        previous = options.leading === false ? 0 : Number(new Date());
        timeout = null;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      };
      return (..._args) => {
        let now = Number(new Date());
        if (!previous && options.leading === false) previous = now;
        let remaining = wait - (now - previous);
        context = this;
        args = _args;
        if (remaining <= 0 || remaining > wait) {
          clearTimeout(timeout);
          timeout = null;
          previous = now;
          result = func.apply(context, args);
          if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
          timeout = setTimeout(later, remaining);
        }
        return result;
      };
    },
    setpage() {
      if (this.nomore && !this.loading) return; //到达底部不再执行
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
    //   console.log(scrollTop, windowHeight, scrollHeight);
      //滚动条到底部的条件
      if (scrollTop + windowHeight + 5 >= scrollHeight) {
        console.log("加载更多数据");
        // this.loading=true;
        //获取数据请求 请求结束后
        //成功设置 this.list =[...this.list,...this.list1];  this.loading=false;
        //失败设置 没有更多  this.nomore = true; this.loading = false;
        // window.setTimeout(()=>{this.loading=false;
        // console.log(this.list);},5000)

      }
      else{this.loading=false;}
      window.clearTimeout();
    },
    loadData() {
      console.log("loadData")
      Http.get(Apis.PAGE.SQUARE_PAGE).then((res) => {
        this.list = res.crowdTaskVOList
      })
    }
  }
};
</script>

<style lang="less" scoped>
.square-container {
  padding: 40px 80px;
}
.nomore{
    text-align: center;
    font-size: 1.4rem;
    color: #8a8a8a;
    padding: 5px;
}
</style>