NafmPageList.vue
2.73 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
<template>
<div v-if="isEmpty" class="list-empty">暂无数据</div>
<section v-else class="page_list">
<van-list
v-model="Status.loading"
:finished="Status.finished"
:error.sync="Status.error"
error-text="加载失败，点击重新加载"
:immediate-check="false"
:offset="10"
finished-text="已经到底啦(*^_^*)"
@load="fetchData"
>
<slot v-bind="{ datas }"></slot>
</van-list>
</section>
</template>
<script>
export default {
name: 'NafmPageList',
props: {
refresh: {
type: Boolean,
default: false
},
emptyType: {
type: [String, Number],
default: 6
},
pageSize: {
type: [String, Number],
default: 10
},
onLoad: {
type: Function,
default: (param) => Promise.resolve({ data: [] })
}
},
model: {
prop: ['refresh']
},
data () {
return {
Status: {
loading: true,
finished: false,
error: false
},
pageNo: 1,
isEmpty: false,
datas: []
}
},
watch: {
refresh (val) {
val && this.resetLoad()
}
},
methods: {
fetchData () {
this.isEmpty = false
Object.assign(this.Status, { loading: true, error: false, finished: false })
const { pageNo, pageSize, datas } = this
const params = { pageNo, pageSize }
this.onLoad(params).then(res => {
const { error, Status, statusText, data } = res || {}
if (error || (status != 0 && status != undefined)) {
Objecta.assign(this.Status, { error: false, loading: false })
this.$emit('input', false)
return
}
// 第一页数据请求结果为空时，表示暂无数据
if (pageNo == 1 && data.length == 0) {
// 页面展示无数据样式
Object.assign(this, { isEmpty: true, datas: [] })
Object.assign(this.Status, { loading: false })
this.$emit('input', false)
return
}
// 小于每次分页数, 表示加载完成
if (data.length < pageSize) {
Object.assign(this.Status, { finished: true })
}
// 第一页直接赋值，后续下拉刷新会重置pageNo。
const newDatas = pageNo == 1 ? data : datas.concat(data)
const newPageNo = pageNo + 1
Object.assign(this, { pageNo: newPageNo, datas: newDatas })
Object.assign(this.Status, { loading: false })
this.$emit('input', false)
}).catch(e => {
Object.assign(this.Status, { error: true, loading: false })
this.$emit('input', false)
})
},
resetLoad () {
Object.assign(this, { pageNo: 1 })
this.fetchData()
}
},
mounted () {
this.fetchData()
}
}
</script>