Commit 109465d3c51ad9e58a5a5351b4031ac6b73b6de0
1 parent
6850c1da
optimize Scroll scroll behavior
Showing
2 changed files
with
17 additions
and
9 deletions
Show diff stats
examples/routers/scroll.vue
1 | <template> | 1 | <template> |
2 | - <Scroll :on-reach-edge="loadData" loading-text="L-o-a-d-i-n-g..."> | 2 | + <Scroll :on-reach-top="loadData" loading-text="L-o-a-d-i-n-g..."> |
3 | <section v-for="item in list"> | 3 | <section v-for="item in list"> |
4 | <div class="city"> | 4 | <div class="city"> |
5 | <p>{{ item }}</p> | 5 | <p>{{ item }}</p> |
src/components/scroll/scroll.vue
@@ -31,6 +31,8 @@ | @@ -31,6 +31,8 @@ | ||
31 | minimumStartDragOffset: 5, // minimum start drag offset | 31 | minimumStartDragOffset: 5, // minimum start drag offset |
32 | }; | 32 | }; |
33 | 33 | ||
34 | + const noop = () => Promise.resolve(); | ||
35 | + | ||
34 | export default { | 36 | export default { |
35 | name: 'Scroll', | 37 | name: 'Scroll', |
36 | mixins: [], | 38 | mixins: [], |
@@ -41,16 +43,13 @@ | @@ -41,16 +43,13 @@ | ||
41 | default: 300 | 43 | default: 300 |
42 | }, | 44 | }, |
43 | onReachTop: { | 45 | onReachTop: { |
44 | - type: Function, | ||
45 | - default: () => Promise.resolve() | 46 | + type: Function |
46 | }, | 47 | }, |
47 | onReachBottom: { | 48 | onReachBottom: { |
48 | - type: Function, | ||
49 | - default: () => Promise.resolve() | 49 | + type: Function |
50 | }, | 50 | }, |
51 | onReachEdge: { | 51 | onReachEdge: { |
52 | - type: Function, | ||
53 | - default: () => Promise.resolve() | 52 | + type: Function |
54 | }, | 53 | }, |
55 | loadingText: { | 54 | loadingText: { |
56 | type: String, | 55 | type: String, |
@@ -134,8 +133,8 @@ | @@ -134,8 +133,8 @@ | ||
134 | } | 133 | } |
135 | } | 134 | } |
136 | 135 | ||
137 | - const callbacks = [this.waitOneSecond(), this.onReachEdge(dir)]; | ||
138 | - callbacks.push(dir > 0 ? this.onReachTop() : this.onReachBottom()); | 136 | + const callbacks = [this.waitOneSecond(), this.onReachEdge ? this.onReachEdge(dir) : noop()]; |
137 | + callbacks.push(dir > 0 ? this.onReachTop ? this.onReachTop() : noop() : this.onReachBottom ? this.onReachBottom() : noop()); | ||
139 | 138 | ||
140 | let tooSlow = setTimeout(() => { | 139 | let tooSlow = setTimeout(() => { |
141 | this.reset(); | 140 | this.reset(); |
@@ -183,6 +182,15 @@ | @@ -183,6 +182,15 @@ | ||
183 | stretchEdge(direction) { | 182 | stretchEdge(direction) { |
184 | clearTimeout(this.rubberRollBackTimeout); | 183 | clearTimeout(this.rubberRollBackTimeout); |
185 | 184 | ||
185 | + // check if set these props | ||
186 | + if (!this.onReachEdge) { | ||
187 | + if (direction > 0) { | ||
188 | + if (!this.onReachTop) return; | ||
189 | + } else { | ||
190 | + if (!this.onReachBottom) return; | ||
191 | + } | ||
192 | + } | ||
193 | + | ||
186 | // if the scroll is not strong enough, lets reset it | 194 | // if the scroll is not strong enough, lets reset it |
187 | this.rubberRollBackTimeout = setTimeout(() => { | 195 | this.rubberRollBackTimeout = setTimeout(() => { |
188 | if (!this.isLoading) this.reset(); | 196 | if (!this.isLoading) this.reset(); |