|
|
@@ -0,0 +1,264 @@
|
|
|
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)">
|
|
|
3
|
+ <section class="inner" :style="{ transform: 'translate3d(0, 0px, 0)' }">
|
|
|
4
|
+ <header class="pull-refresh">
|
|
|
5
|
+ <slot name="pull-refresh">
|
|
|
6
|
+ <span class="down-tip">下拉更新</span>
|
|
|
7
|
+ <span class="up-tip">松开刷新数据</span>
|
|
|
8
|
+ <span class="refresh-tip">加载中……</span>
|
|
|
9
|
+ </slot>
|
|
|
10
|
+ </header>
|
|
|
11
|
+ <slot>
|
|
|
12
|
+ </slot>
|
|
|
13
|
+ <footer class="load-more">
|
|
|
14
|
+ <slot name="load-more">
|
|
|
15
|
+ <span v-show="downFlag === false">上拉加载更多</span>
|
|
|
16
|
+ <span v-show="downFlag === true">加载中……</span>
|
|
|
17
|
+ </slot>
|
|
|
18
|
+ </footer>
|
|
|
19
|
+ <div class="nullData" v-show="dataList.noFlag">暂无更多数据</div>
|
|
|
20
|
+ </section>
|
|
|
21
|
+ </div>
|
|
|
22
|
+</template>
|
|
|
23
|
+
|
|
|
24
|
+<script>
|
|
|
25
|
+export default {
|
|
|
26
|
+ props: {
|
|
|
27
|
+ offset: { // 默认高度
|
|
|
28
|
+ type: Number,
|
|
|
29
|
+ default: 100
|
|
|
30
|
+ },
|
|
|
31
|
+ enableInfinite: { // 上拉加载
|
|
|
32
|
+ type: Boolean,
|
|
|
33
|
+ default: true
|
|
|
34
|
+ },
|
|
|
35
|
+ enableRefresh: { // 下拉刷新
|
|
|
36
|
+ type: Boolean,
|
|
|
37
|
+ default: true
|
|
|
38
|
+ },
|
|
|
39
|
+ dataList: { // 数据列表
|
|
|
40
|
+ default: false,
|
|
|
41
|
+ required: false
|
|
|
42
|
+ },
|
|
|
43
|
+ onRefresh: { // 加载方法
|
|
|
44
|
+ type: Function,
|
|
|
45
|
+ default: undefined,
|
|
|
46
|
+ required: false
|
|
|
47
|
+ },
|
|
|
48
|
+ onInfinite: { // 刷新方法
|
|
|
49
|
+ type: Function,
|
|
|
50
|
+ default: undefined,
|
|
|
51
|
+ require: false
|
|
|
52
|
+ }
|
|
|
53
|
+ },
|
|
|
54
|
+ data () {
|
|
|
55
|
+ return {
|
|
|
56
|
+ top: 0,
|
|
|
57
|
+ state: 0,
|
|
|
58
|
+ startX: 0,
|
|
|
59
|
+ startY: 0,
|
|
|
60
|
+ touching: false,
|
|
|
61
|
+ infiniteLoading: false,
|
|
|
62
|
+ downFlag: false // 用来显示是否加载中
|
|
|
63
|
+ }
|
|
|
64
|
+ },
|
|
|
65
|
+ created () {
|
|
|
66
|
+
|
|
|
67
|
+ },
|
|
|
68
|
+ methods: {
|
|
|
69
|
+ touchStart (e) {
|
|
|
70
|
+ this.startY = e.targetTouches[0].pageY
|
|
|
71
|
+ this.startX = e.targetTouches[0].pageX
|
|
|
72
|
+ this.startScroll = this.$el.scrollTop || 0
|
|
|
73
|
+ this.touching = true // 留着有用，不能删除
|
|
|
74
|
+
|
|
|
75
|
+ this.dataList.noFlag = false
|
|
|
76
|
+ this.$el.querySelector('.load-more').style.display = 'block'
|
|
|
77
|
+ },
|
|
|
78
|
+ touchMove (e) {
|
|
|
79
|
+ if (!this.enableRefresh || this.dataList.noFlag || !this.touching) {
|
|
|
80
|
+ return
|
|
|
81
|
+ }
|
|
|
82
|
+ let diff = e.targetTouches[0].pageY - this.startY - this.startScroll
|
|
|
83
|
+ if (diff > 0) e.preventDefault()
|
|
|
84
|
+ this.top = Math.pow(diff, 0.8) + (this.state === 2 ? this.offset : 0)
|
|
|
85
|
+ if (this.state === 2) { // in refreshing
|
|
|
86
|
+ return
|
|
|
87
|
+ }
|
|
|
88
|
+ if (this.top >= this.offset) {
|
|
|
89
|
+ this.state = 1
|
|
|
90
|
+ } else {
|
|
|
91
|
+ this.state = 0
|
|
|
92
|
+ }
|
|
|
93
|
+
|
|
|
94
|
+ let more = this.$el.querySelector('.load-more')
|
|
|
95
|
+ if (!this.top && this.state === 0) {
|
|
|
96
|
+ more.style.display = 'block'
|
|
|
97
|
+ } else {
|
|
|
98
|
+ more.style.display = 'none'
|
|
|
99
|
+ }
|
|
|
100
|
+ },
|
|
|
101
|
+ touchEnd (e) {
|
|
|
102
|
+ if (!this.enableRefresh) {
|
|
|
103
|
+ return
|
|
|
104
|
+ }
|
|
|
105
|
+ this.touching = false
|
|
|
106
|
+ if (this.state === 2) { // in refreshing
|
|
|
107
|
+ this.state = 2
|
|
|
108
|
+ this.top = this.offset
|
|
|
109
|
+ return
|
|
|
110
|
+ }
|
|
|
111
|
+ if (this.top >= this.offset) { // do refresh
|
|
|
112
|
+ this.refresh()
|
|
|
113
|
+ } else { // cancel refresh
|
|
|
114
|
+ this.state = 0
|
|
|
115
|
+ this.top = 0
|
|
|
116
|
+ }
|
|
|
117
|
+
|
|
|
118
|
+ // 用于判断滑动是否在原地 ----begin
|
|
|
119
|
+ let endX = e.changedTouches[0].pageX
|
|
|
120
|
+ let endY = e.changedTouches[0].pageY
|
|
|
121
|
+ let dy = this.startY - endY
|
|
|
122
|
+ let dx = endX - this.startX
|
|
|
123
|
+ // 如果滑动距离太短
|
|
|
124
|
+ if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
|
|
|
125
|
+ // console.log("滑动距离太短")
|
|
|
126
|
+ this.downFlag = false
|
|
|
127
|
+ return
|
|
|
128
|
+ }
|
|
|
129
|
+ // --------end--------
|
|
|
130
|
+
|
|
|
131
|
+ if (!this.enableInfinite || this.infiniteLoading) {
|
|
|
132
|
+ return
|
|
|
133
|
+ }
|
|
|
134
|
+
|
|
|
135
|
+ let outerHeight = this.$el.clientHeight
|
|
|
136
|
+ let innerHeight = this.$el.querySelector('.inner').clientHeight
|
|
|
137
|
+ let scrollTop = this.$el.scrollTop
|
|
|
138
|
+ let ptrHeight = this.onRefresh ? this.$el.querySelector('.pull-refresh').clientHeight : 0
|
|
|
139
|
+ let bottom = innerHeight - outerHeight - scrollTop - ptrHeight
|
|
|
140
|
+
|
|
|
141
|
+ // console.log(bottom + " __ " + this.offset)
|
|
|
142
|
+
|
|
|
143
|
+ if (bottom <= this.offset && this.state === 0) {
|
|
|
144
|
+ this.downFlag = true
|
|
|
145
|
+ this.infinite()
|
|
|
146
|
+ } else {
|
|
|
147
|
+ this.$el.querySelector('.load-more').style.display = 'none'
|
|
|
148
|
+ this.downFlag = false
|
|
|
149
|
+ }
|
|
|
150
|
+ },
|
|
|
151
|
+ refresh () {
|
|
|
152
|
+ this.state = 2
|
|
|
153
|
+ this.top = this.offset
|
|
|
154
|
+ setTimeout(() => {
|
|
|
155
|
+ this.onRefresh(this.refreshDone)
|
|
|
156
|
+ }, 1000)
|
|
|
157
|
+ },
|
|
|
158
|
+ refreshDone () {
|
|
|
159
|
+ this.state = 0
|
|
|
160
|
+ this.top = 0
|
|
|
161
|
+ },
|
|
|
162
|
+
|
|
|
163
|
+ infinite () {
|
|
|
164
|
+ this.infiniteLoading = true
|
|
|
165
|
+
|
|
|
166
|
+ setTimeout(() => {
|
|
|
167
|
+ this.onInfinite(this.infiniteDone)
|
|
|
168
|
+ }, 2000)
|
|
|
169
|
+ },
|
|
|
170
|
+
|
|
|
171
|
+ infiniteDone () {
|
|
|
172
|
+ this.infiniteLoading = false
|
|
|
173
|
+ }
|
|
|
174
|
+ }
|
|
|
175
|
+}
|
|
|
176
|
+</script>
|
|
|
177
|
+
|
|
|
178
|
+<style lang="scss" scoped>
|
|
|
179
|
+.yo-scroll {
|
|
|
180
|
+ font-size: 0.24rem;
|
|
|
181
|
+ position: absolute;
|
|
|
182
|
+ top: 0;
|
|
|
183
|
+ right: 0;
|
|
|
184
|
+ bottom: 0;
|
|
|
185
|
+ left: 0;
|
|
|
186
|
+ overflow: auto;
|
|
|
187
|
+ z-index: 100;
|
|
|
188
|
+ height: auto;
|
|
|
189
|
+ -webkit-overflow-scrolling: touch;
|
|
|
190
|
+ .inner {
|
|
|
191
|
+ position: absolute;
|
|
|
192
|
+ top: -0.5rem;
|
|
|
193
|
+ width: 100%;
|
|
|
194
|
+ height: auto;
|
|
|
195
|
+ transition-duration: 300ms;
|
|
|
196
|
+ .pull-refresh {
|
|
|
197
|
+ position: relative;
|
|
|
198
|
+ left: 0;
|
|
|
199
|
+ top: 0;
|
|
|
200
|
+ width: 100%;
|
|
|
201
|
+ height: 0.5rem;
|
|
|
202
|
+ display: flex;
|
|
|
203
|
+ display: -webkit-flex;
|
|
|
204
|
+ align-items: center;
|
|
|
205
|
+ justify-content: center;
|
|
|
206
|
+ }
|
|
|
207
|
+ .load-more {
|
|
|
208
|
+ height: 0.5rem;
|
|
|
209
|
+ line-height: 0.5rem;
|
|
|
210
|
+ display: flex;
|
|
|
211
|
+ text-align: center;
|
|
|
212
|
+ align-items: center;
|
|
|
213
|
+ justify-content: center;
|
|
|
214
|
+ display: none;
|
|
|
215
|
+ }
|
|
|
216
|
+ .nullData {
|
|
|
217
|
+ // 暂无更多数据样式
|
|
|
218
|
+ font-size: 0.13rem;
|
|
|
219
|
+ color: #999999;
|
|
|
220
|
+ height: 0.5rem;
|
|
|
221
|
+ line-height: 0.5rem;
|
|
|
222
|
+ text-align: center;
|
|
|
223
|
+ }
|
|
|
224
|
+ .down-tip,
|
|
|
225
|
+ .refresh-tip,
|
|
|
226
|
+ .up-tip {
|
|
|
227
|
+ display: none;
|
|
|
228
|
+ }
|
|
|
229
|
+ .up-tip:before,
|
|
|
230
|
+ .refresh-tip:before {
|
|
|
231
|
+ content: "";
|
|
|
232
|
+ display: inline-block;
|
|
|
233
|
+ width: 1.6rem;
|
|
|
234
|
+ height: 0.7rem;
|
|
|
235
|
+ background-size: 70% !important;
|
|
|
236
|
+ position: absolute;
|
|
|
237
|
+ top: 0;
|
|
|
238
|
+ left: 20%;
|
|
|
239
|
+ }
|
|
|
240
|
+ // .up-tip:before {
|
|
|
241
|
+ // background: url(./loading.gif) no-repeat center;
|
|
|
242
|
+ // }
|
|
|
243
|
+ // .refresh-tip:before {
|
|
|
244
|
+ // background: url(./loading.gif) no-repeat center;
|
|
|
245
|
+ // }
|
|
|
246
|
+ }
|
|
|
247
|
+}
|
|
|
248
|
+
|
|
|
249
|
+.yo-scroll.touch .inner {
|
|
|
250
|
+ transition-duration: 0;
|
|
|
251
|
+}
|
|
|
252
|
+
|
|
|
253
|
+.yo-scroll.down .down-tip {
|
|
|
254
|
+ display: block;
|
|
|
255
|
+}
|
|
|
256
|
+
|
|
|
257
|
+.yo-scroll.up .up-tip {
|
|
|
258
|
+ display: block;
|
|
|
259
|
+}
|
|
|
260
|
+
|
|
|
261
|
+.yo-scroll.refresh .refresh-tip {
|
|
|
262
|
+ display: block;
|
|
|
263
|
+}
|
|
|
264
|
+</style>
|
wangfei
преди 6 години
