drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

optimize Scroll scroll behavior

Browse source
This commit is contained in:
梁灏 2017-10-16 20:10:21 +08:00
parent 6850c1da89
commit 109465d3c5
2 changed files with 17 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/routers/scroll.vue
View file

@ -1,5 +1,5 @@
<template>
<Scroll :on-reach-edge="loadData" loading-text="L-o-a-d-i-n-g...">
<Scroll :on-reach-top="loadData" loading-text="L-o-a-d-i-n-g...">
<section v-for="item in list">
<div class="city">
<p>{{ item }}</p>

24
src/components/scroll/scroll.vue
View file

@ -31,6 +31,8 @@
minimumStartDragOffset: 5, // minimum start drag offset
};
const noop = () => Promise.resolve();
export default {
name: 'Scroll',
mixins: [],
@ -41,16 +43,13 @@
default: 300
},
onReachTop: {
type: Function,
default: () => Promise.resolve()
type: Function
},
onReachBottom: {
type: Function,
default: () => Promise.resolve()
type: Function
},
onReachEdge: {
type: Function,
default: () => Promise.resolve()
type: Function
},
loadingText: {
type: String,
@ -134,8 +133,8 @@
}
}
const callbacks = [this.waitOneSecond(), this.onReachEdge(dir)];
callbacks.push(dir > 0 ? this.onReachTop() : this.onReachBottom());
const callbacks = [this.waitOneSecond(), this.onReachEdge ? this.onReachEdge(dir) : noop()];
callbacks.push(dir > 0 ? this.onReachTop ? this.onReachTop() : noop() : this.onReachBottom ? this.onReachBottom() : noop());
let tooSlow = setTimeout(() => {
this.reset();
@ -183,6 +182,15 @@
stretchEdge(direction) {
clearTimeout(this.rubberRollBackTimeout);
// check if set these props
if (!this.onReachEdge) {
if (direction > 0) {
if (!this.onReachTop) return;
} else {
if (!this.onReachBottom) return;
}
}
// if the scroll is not strong enough, lets reset it
this.rubberRollBackTimeout = setTimeout(() => {
if (!this.isLoading) this.reset();