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

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

    <div class="square-list-container" v-loading="loading" type="flex" align="middle">
      <el-row v-if="list != null && list.length != 0" type="flex" align="middle" justify="center"  style="font-size: 14px;">
        <el-col :span="5">任务封面</el-col>
        <el-col :span="4">任务名称</el-col>
        <el-col :span="4">任务类型</el-col>
        <el-col :span="4">任务预算</el-col>
        <el-col :span="4">领取次数</el-col>
        <el-col :span="3">操作</el-col>
      </el-row>
      <task-item v-if="list!=null&&list.length>0" 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="list==null || list.length === 0" 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')
      this.showLoading()
      Http.get(Apis.PAGE.SQUARE_PAGE).then((res) => {
        this.list = res.crowdTaskVOList
        this.hideLoading()
      }).catch((error) => {
        notify('error', '任务加载失败' + error.data)
      })
    },
    showLoading () {
      this.loading = true
    },
    hideLoading () {
      this.loading = false
    }
  }
}
</script>

<style lang="less" scoped>
  .square-container {
    padding: 40px 80px;
  }

  .nomore {
    text-align: center;
    font-size: 1.4rem;
    color: #8a8a8a;
    padding: 5px;
  }
</style>