Commit 109465d3c51ad9e58a5a5351b4031ac6b73b6de0

Authored by 梁灏
1 parent 6850c1da

optimize Scroll scroll behavior

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();