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" :taskId="item.id" />
      <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";

export default {
  name: "Square",
  components: { TaskItem },
  data() {
    return {
      loading: false,
      nomore:false,
      list: [
        {
          id: 0,
          title: "发送群文件测试",
          platform: [0, 1],
          description: "任务描述文字xxxx",
          price: "30",
          业务类型: 1,
          participantNum: 30,
          status: 0
        },
        {
          id: 1,
          title: "多人聊天发送文件测试",
          platform: [0],
          description: "任务描述文字xxxx",
          price: "10",
          业务类型: 0,
          participantNum: 0,
          status: 1
        },
        {
          id: 2,
          title: "浏览器波洞星球",
          platform: [1],
          description: "任务描述文字xxxx",
          price: "10",
          业务类型: 2,
          participantNum: 21,
          status: 0
        },
        {
          id: 3,
          title: "举报支持选择聊天记录（安全）",
          platform: [0, 1, 2],
          description: "任务描述文字xxxx",
          price: "0",
          业务类型: 1,
          participantNum: 1,
          status: 1
        },
        {
          id: 4,
          title: "发送群文件测试",
          platform: [0, 1],
          description: "任务描述文字xxxx",
          price: "30",
          业务类型: 1,
          participantNum: 30,
          status: 0
        },
        {
          id: 5,
          title: "多人聊天发送文件测试",
          platform: [0],
          description: "任务描述文字xxxx",
          price: "10",
          业务类型: 0,
          participantNum: 0,
          status: 1
        },
        {
          id: 6,
          title: "浏览器波洞星球",
          platform: [1],
          description: "任务描述文字xxxx",
          price: "10",
          业务类型: 2,
          participantNum: 21,
          status: 0
        },
        {
          id: 7,
          title: "举报支持选择聊天记录（安全）",
          platform: [0, 1, 2],
          description: "任务描述文字xxxx",
          price: "0",
          业务类型: 1,
          participantNum: 1,
          status: 1
        },
        {
          id: 8,
          title: "发送群文件测试",
          platform: [0, 1],
          description: "任务描述文字xxxx",
          price: "30",
          业务类型: 1,
          participantNum: 30,
          status: 0
        },
        {
          id: 9,
          title: "多人聊天发送文件测试",
          platform: [0],
          description: "任务描述文字xxxx",
          price: "10",
          业务类型: 0,
          participantNum: 0,
          status: 1
        },
        {
          id: 10,
          title: "浏览器波洞星球",
          platform: [1],
          description: "任务描述文字xxxx",
          price: "10",
          业务类型: 2,
          participantNum: 21,
          status: 0
        },
        {
          id: 11,
          title: "举报支持选择聊天记录（安全）",
          platform: [0, 1, 2],
          description: "任务描述文字xxxx",
          price: "0",
          业务类型: 1,
          participantNum: 1,
          status: 1
        }
      ],
      list1: [
        {
          id: 0,
          title: "1发送群文件测试",
          platform: [0, 1],
          description: "任务描述文字xxxx",
          price: "30",
          serviceType: 1,
          participantNum: 30,
          status: 0
        },
        {
          id: 1,
          title: "多人聊天发送文件测试",
          platform: [0],
          description: "任务描述文字xxxx",
          price: "10",
          serviceType: 0,
          participantNum: 0,
          status: 1
        },
        {
          id: 2,
          title: "浏览器波洞星球",
          platform: [1],
          description: "任务描述文字xxxx",
          price: "10",
          serviceType: 2,
          participantNum: 21,
          status: 0
        },
        {
          id: 3,
          title: "举报支持选择聊天记录（安全）",
          platform: [0, 1, 2],
          description: "任务描述文字xxxx",
          price: "0",
          serviceType: 1,
          participantNum: 1,
          status: 1
        },
        {
          id: 4,
          title: "发送群文件测试",
          platform: [0, 1],
          description: "任务描述文字xxxx",
          price: "30",
          serviceType: 1,
          participantNum: 30,
          status: 0
        },
        {
          id: 5,
          title: "多人聊天发送文件测试",
          platform: [0],
          description: "任务描述文字xxxx",
          price: "10",
          serviceType: 0,
          participantNum: 0,
          status: 1
        },
        {
          id: 6,
          title: "浏览器波洞星球",
          platform: [1],
          description: "任务描述文字xxxx",
          price: "10",
          serviceType: 2,
          participantNum: 21,
          status: 0
        },
        {
          id: 7,
          title: "举报支持选择聊天记录（安全）",
          platform: [0, 1, 2],
          description: "任务描述文字xxxx",
          price: "0",
          serviceType: 1,
          participantNum: 1,
          status: 1
        },
        {
          id: 8,
          title: "发送群文件测试",
          platform: [0, 1],
          description: "任务描述文字xxxx",
          price: "30",
          serviceType: 1,
          participantNum: 30,
          status: 0
        },
        {
          id: 9,
          title: "多人聊天发送文件测试",
          platform: [0],
          description: "任务描述文字xxxx",
          price: "10",
          serviceType: 0,
          participantNum: 0,
          status: 1
        },
        {
          id: 10,
          title: "浏览器波洞星球",
          platform: [1],
          description: "任务描述文字xxxx",
          price: "10",
          serviceType: 2,
          participantNum: 21,
          status: 0
        },
        {
          id: 11,
          title: "举报支持选择聊天记录（安全）",
          platform: [0, 1, 2],
          description: "任务描述文字xxxx",
          price: "0",
          serviceType: 1,
          participantNum: 1,
          status: 1
        }
      ]
    };
  },
  mounted() {
    window.addEventListener("scroll", this.throttle(this.setpage, 1000), false);
  },
  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();
    }
  }
};
</script>

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