|
|
@@ -2,87 +2,88 @@
|
|
|
<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 class="square-list-container" v-loading="loading">
|
|
|
+ <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 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() {
|
|
|
+ name: 'Square',
|
|
|
+ components: {TaskItem},
|
|
|
+ data () {
|
|
|
return {
|
|
|
loading: true,
|
|
|
- nomore:false,
|
|
|
+ nomore: false,
|
|
|
list: [],
|
|
|
- };
|
|
|
+ }
|
|
|
},
|
|
|
- mounted() {
|
|
|
- window.addEventListener("scroll", this.throttle(this.setpage, 1000), false);
|
|
|
+ mounted () {
|
|
|
+ window.addEventListener('scroll', this.throttle(this.setpage, 1000), false)
|
|
|
},
|
|
|
- created() {
|
|
|
+ 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;
|
|
|
- };
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ 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);
|
|
|
+ timeout = setTimeout(later, remaining)
|
|
|
}
|
|
|
- return result;
|
|
|
- };
|
|
|
+ return result
|
|
|
+ }
|
|
|
},
|
|
|
- setpage() {
|
|
|
- if (this.nomore && !this.loading) return; //到达底部不再执行
|
|
|
+ setpage () {
|
|
|
+ if (this.nomore && !this.loading) return //到达底部不再执行
|
|
|
var scrollTop =
|
|
|
- document.documentElement.scrollTop || document.body.scrollTop;
|
|
|
+ document.documentElement.scrollTop || document.body.scrollTop
|
|
|
//变量windowHeight是可视区的高度
|
|
|
var windowHeight =
|
|
|
- document.documentElement.clientHeight || document.body.clientHeight;
|
|
|
+ document.documentElement.clientHeight || document.body.clientHeight
|
|
|
//变量scrollHeight是滚动条的总高度
|
|
|
var scrollHeight =
|
|
|
- document.documentElement.scrollHeight || document.body.scrollHeight;
|
|
|
- // console.log(scrollTop, windowHeight, scrollHeight);
|
|
|
+ document.documentElement.scrollHeight || document.body.scrollHeight
|
|
|
+ // console.log(scrollTop, windowHeight, scrollHeight);
|
|
|
//滚动条到底部的条件
|
|
|
if (scrollTop + windowHeight + 5 >= scrollHeight) {
|
|
|
- console.log("加载更多数据");
|
|
|
+ console.log('加载更多数据')
|
|
|
// this.loading=true;
|
|
|
//获取数据请求 请求结束后
|
|
|
//成功设置 this.list =[...this.list,...this.list1]; this.loading=false;
|
|
|
@@ -91,27 +92,40 @@ export default {
|
|
|
// console.log(this.list);},5000)
|
|
|
|
|
|
}
|
|
|
- else{this.loading=false;}
|
|
|
- window.clearTimeout();
|
|
|
+ else {
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
+ window.clearTimeout()
|
|
|
},
|
|
|
- loadData() {
|
|
|
- console.log("loadData")
|
|
|
+ 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{
|
|
|
+ .square-container {
|
|
|
+ padding: 40px 80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nomore {
|
|
|
text-align: center;
|
|
|
font-size: 1.4rem;
|
|
|
color: #8a8a8a;
|
|
|
padding: 5px;
|
|
|
-}
|
|
|
+ }
|
|
|
</style>
|