<template>
<div class="box_list" style="overflow:auto">
<div v-infinite-scroll="load" infinite-scroll-disabled="disabled">
<div v-for="(item, index) in countData" :key="index" class="list-item">
<div class="nav_list">
<div class="list_name">{
{
item.name }}王努力</div>
<div class="list_pm">{
{
item.pm }}</div>
</div>
<div class="lcb_line_box"></div>
</div>
</div>
</div>
<div class="box_more" v-if="loading" @click="more">
<van-icon name="bar-chart-o" />
<span class="more_a">更多</span>
</div>
<div class="box_more" v-if="noMore">
<van-icon name="bar-chart-o" />
<span class="more_a">没有更多了</span>
</div>
</template>
<script>
export default {
data () {
return {
// 数据列表
// 数据列表
count: [
{
name: '王努力1',
pm: '北京1号线项目经理',
},
{
name: '王努力2',
pm: '北京2号线项目经理',
}, {
name: '王努力',
pm: '北京3号线项目经理',
}, {
name: '王努力',
pm: '北京4号线项目经理',
}, {
name: '王努力',
pm: '北京5号线项目经理',
}, {
name: '王努力',
pm: '北京6号线项目经理',
}, {
name: '王努力',
pm: '北京7号线项目经理',
},
],
loading: false,
//默认显示条数
cou: 3,
}
},
computed: {
noMore() {
// 判断加载条数是否大于列表数据长度
return this.cou > this.count.length;
},
disabled() {
// 加载完成
return this.loading || this.noMore;
},
countData() {
// 计算属性使用切片生成新数组
let data = [];
// 大于三条，使用切片，返回新数组
if (this.count.length > 3) {
data = this.count.slice(0, this.cou);
return data;
} else {
// 否则使用原来数组，不进行切片处理
data = this.count
return data;
}
},
},
methods: {
load() {
this.loading = true;
},
more() {
// 每次点击加三条
this.cou += 3;
this.loading = false;
},
}
}
</script>
