|
@@ -1,5 +1,11 @@
|
1
|
1
|
<template>
|
2
|
|
- <div class="yo-scroll" :class="{'down':(state===0),'up':(state==1),refresh:(state===2),touch:touching}" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)">
|
|
2
|
+ <div
|
|
3
|
+ class="yo-scroll"
|
|
4
|
+ :class="{'down':(state===0),'up':(state==1),refresh:(state===2),touch:touching}"
|
|
5
|
+ @touchstart="touchStart($event)"
|
|
6
|
+ @touchmove="touchMove($event)"
|
|
7
|
+ @touchend="touchEnd($event)"
|
|
8
|
+ >
|
3
|
9
|
<section class="inner" :style="{ transform: 'translate3d(0, 0px, 0)' }">
|
4
|
10
|
<header class="pull-refresh">
|
5
|
11
|
<slot name="pull-refresh">
|
|
@@ -8,8 +14,7 @@
|
8
|
14
|
<span class="refresh-tip">加载中……</span>
|
9
|
15
|
</slot>
|
10
|
16
|
</header>
|
11
|
|
- <slot>
|
12
|
|
- </slot>
|
|
17
|
+ <slot></slot>
|
13
|
18
|
<footer class="load-more">
|
14
|
19
|
<slot name="load-more">
|
15
|
20
|
<span v-show="downFlag === false">上拉加载更多</span>
|
|
@@ -34,10 +39,10 @@ export default {
|
34
|
39
|
},
|
35
|
40
|
enableRefresh: { // 下拉刷新
|
36
|
41
|
type: Boolean,
|
37
|
|
- default: true
|
|
42
|
+ default: false
|
38
|
43
|
},
|
39
|
44
|
dataList: { // 数据列表
|
40
|
|
- default: false,
|
|
45
|
+ default: undefined,
|
41
|
46
|
required: false
|
42
|
47
|
},
|
43
|
48
|
onRefresh: { // 加载方法
|
|
@@ -63,7 +68,7 @@ export default {
|
63
|
68
|
}
|
64
|
69
|
},
|
65
|
70
|
created () {
|
66
|
|
-
|
|
71
|
+ console.log(this.dataList)
|
67
|
72
|
},
|
68
|
73
|
methods: {
|
69
|
74
|
touchStart (e) {
|
|
@@ -76,7 +81,7 @@ export default {
|
76
|
81
|
this.$el.querySelector('.load-more').style.display = 'block'
|
77
|
82
|
},
|
78
|
83
|
touchMove (e) {
|
79
|
|
- if (!this.enableRefresh || this.dataList.noFlag || !this.touching) {
|
|
84
|
+ if (this.dataList.noFlag || !this.touching) {
|
80
|
85
|
return
|
81
|
86
|
}
|
82
|
87
|
let diff = e.targetTouches[0].pageY - this.startY - this.startScroll
|
|
@@ -99,9 +104,9 @@ export default {
|
99
|
104
|
}
|
100
|
105
|
},
|
101
|
106
|
touchEnd (e) {
|
102
|
|
- if (!this.enableRefresh) {
|
103
|
|
- return
|
104
|
|
- }
|
|
107
|
+ // if (!this.enableRefresh) {
|
|
108
|
+ // return
|
|
109
|
+ // }
|
105
|
110
|
this.touching = false
|
106
|
111
|
if (this.state === 2) { // in refreshing
|
107
|
112
|
this.state = 2
|
|
@@ -128,9 +133,9 @@ export default {
|
128
|
133
|
}
|
129
|
134
|
// --------end--------
|
130
|
135
|
|
131
|
|
- if (!this.enableInfinite || this.infiniteLoading) {
|
132
|
|
- return
|
133
|
|
- }
|
|
136
|
+ // if (!this.enableInfinite || this.infiniteLoading) {
|
|
137
|
+ // return
|
|
138
|
+ // }
|
134
|
139
|
|
135
|
140
|
let outerHeight = this.$el.clientHeight
|
136
|
141
|
let innerHeight = this.$el.querySelector('.inner').clientHeight
|
|
@@ -170,6 +175,7 @@ export default {
|
170
|
175
|
|
171
|
176
|
infiniteDone () {
|
172
|
177
|
this.infiniteLoading = false
|
|
178
|
+ this.downFlag = false
|
173
|
179
|
}
|
174
|
180
|
}
|
175
|
181
|
}
|
|
@@ -228,7 +234,7 @@ export default {
|
228
|
234
|
}
|
229
|
235
|
.up-tip:before,
|
230
|
236
|
.refresh-tip:before {
|
231
|
|
- content: "";
|
|
237
|
+ content: '';
|
232
|
238
|
display: inline-block;
|
233
|
239
|
width: 1.6rem;
|
234
|
240
|
height: 0.7rem;
|