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
| <template>
| <u-pull-refresh
| :refreshing="refreshing"
| :threshold="50"
| @refresh="handleRefresh"
| >
| <u-virtual-list
| ref="virtualList"
| :list-data="listData"
| :item-height="itemHeight"
| :height="height"
| :buffer="buffer"
| :key-field="keyField"
| :scroll-top="scrollTop"
| @scroll="handleScroll"
| >
| <template #default="{ item, index }">
| <slot :item="item" :index="index"></slot>
| </template>
| </u-virtual-list>
| </u-pull-refresh>
| </template>
|
| <script>
|
| export default {
| name: 'u-refresh-virtual-list',
| props: {
| // 数据源
| listData: {
| type: Array,
| default: () => []
| },
| // 每项高度（固定高度模式）
| itemHeight: {
| type: Number,
| default: 50
| },
| // 容器高度
| height: {
| type: [String, Number],
| default: '100%'
| },
| // 缓冲区项数
| buffer: {
| type: Number,
| default: 4
| },
| // 索引键名
| keyField: {
| type: String,
| default: 'id'
| }
| },
| data() {
| return {
| refreshing: false,
| scrollTop: 0
| }
| },
| methods: {
| handleRefresh() {
| this.refreshing = true
| this.$emit('refresh')
| },
|
| handleScroll(scrollTop) {
| this.scrollTop = scrollTop
| this.$emit('scroll', scrollTop)
| },
|
| finishRefresh() {
| this.refreshing = false
| },
|
| scrollTo(top) {
| this.scrollTop = top
| },
|
| scrollToTop() {
| this.scrollTo(0)
| }
| }
| }
| </script>
|
|
