index.vue
2.26 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<template>
<div
v-infinite-scroll="loadMore"
class="list-container"
>
<slot :list="list" />
<div
v-if="finishText"
class="finish-text"
>
{{ finishText }}
</div>
<div
v-if="listLoading"
class="loading"
>
<i class="el-icon-loading" />
加载中
</div>
</div>
</template>
<script>
export default {
props: {
loadMethod: {
type: Function,
default: null
},
total: {
type: Number,
default: null
},
totalPages: {
type: Number,
default: null
}
},
data() {
return {
list: [],
nowPage: 1,
finish: false,
loading: true,
listLoading: false,
error: false
}
},
computed: {
params() {
return {
pageNo: this.nowPage,
pageSize: 10
}
},
finishText() {
if (this.error) {
return '系统错误'
}
return this.finish ? (this.list.length > 0 ? '没有更多了' : '没有搜索到结果') : null
}
},
methods: {
async loadMore(loadType) {
console.log('是否全部加载完成', this.finish, this.list)
if (loadType === 'refresh') {
this.nowPage = 1
this.finish = false
this.list = []
}
if (this.finish || this.listLoading) {
return
}
this.listLoading = true
try {
const list = await this.loadMethod?.(this.params) ?? []
this.finish = this.nowPage >= this.totalPages
if (this.nowPage === 1) {
this.list = list
} else {
this.list = this.list.concat(list)
}
if (!this.finish) {
this.nowPage++
}
this.error = false
} catch (e) {
this.finish = true
console.log(e)
this.error = true
} finally {
this.listLoading = false
}
},
async refresh() {
await this.loadMore('refresh')
}
}
}
</script>
<style
scoped
lang="scss"
>
.list-container {
height: 80vh;
flex-grow: 1;
padding: 0 10px 10px 10px;
overflow-y: auto;
.loading {
margin: 10px 0;
width: 100%;
text-align: center;
}
.finish-text {
width: 100%;
text-align: center;
color: #8a8a8a;
line-height: calc(1em + 20px);
}
}
</style>