other / mew-iview

Commit 109465d3c51ad9e58a5a5351b4031ac6b73b6de0

Authored by 梁灏
1 parent 6850c1da

optimize Scroll scroll behavior

Showing 2 changed files with 17 additions and 9 deletions   Show diff stats
Inline Side-by-side
examples/routers/scroll.vue
  Show/Hide comments   View file @109465d
1 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 3 <section v-for="item in list">
4 4 <div class="city">
5 5 <p>{{ item }}</p>
... ...
src/components/scroll/scroll.vue
  Show/Hide comments   View file @109465d
... ... @@ -31,6 +31,8 @@
31 31 minimumStartDragOffset: 5, // minimum start drag offset
32 32 };
33 33  
  34 + const noop = () => Promise.resolve();
  35 +
34 36 export default {
35 37 name: 'Scroll',
36 38 mixins: [],
... ... @@ -41,16 +43,13 @@
41 43 default: 300
42 44 },
43 45 onReachTop: {
44   - type: Function,
45   - default: () => Promise.resolve()
  46 + type: Function
46 47 },
47 48 onReachBottom: {
48   - type: Function,
49   - default: () => Promise.resolve()
  49 + type: Function
50 50 },
51 51 onReachEdge: {
52   - type: Function,
53   - default: () => Promise.resolve()
  52 + type: Function
54 53 },
55 54 loadingText: {
56 55 type: String,
... ... @@ -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 139 let tooSlow = setTimeout(() => {
141 140 this.reset();
... ... @@ -183,6 +182,15 @@
183 182 stretchEdge(direction) {
184 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 194 // if the scroll is not strong enough, lets reset it
187 195 this.rubberRollBackTimeout = setTimeout(() => {
188 196 if (!this.isLoading) this.reset();
... ...