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

add distance-to-edge property

Browse source
This commit is contained in:
Sergio Crisostomo 2017-10-25 21:21:35 +02:00
parent af7d72b4cc
commit 72ba66620d
1 changed files with 20 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -54,9 +54,11 @@
},
loadingText: {
type: String
}
},
distanceToEdge: [Number, Array]
},
data() {
const distanceToEdge = this.calculateProximityThreshold();
return {
showTopLoader: false,
showBottomLoader: false,
@ -73,6 +75,10 @@
handleScroll: () => {},
pointerUpHandler: () => {},
pointerMoveHandler: () => {},
// near to edge detectors
topProximityThreshold: distanceToEdge[0],
bottomProximityThreshold: distanceToEdge[1]
};
},
computed: {
@ -115,7 +121,14 @@
});
},
calculateProximityThreshold(){
const dte = this.distanceToEdge;
if (typeof dte == 'undefined') return [20, 20];
return Array.isArray(dte) ? dte : [dte, dte];
},
onCallback(dir) {
console.log('onCallback', dir);
this.isLoading = true;
this.showBodyLoader = true;
if (dir > 0) {
@ -206,10 +219,10 @@
// to give the feeling its ruberish and can be puled more to start loading
if (direction > 0 && this.reachedTopScrollLimit) {
this.topRubberPadding += 5 - this.topRubberPadding / 5;
if (this.topRubberPadding > 20) this.onCallback(1);
if (this.topRubberPadding > this.topProximityThreshold) this.onCallback(1);
} else if (direction < 0 && this.reachedBottomScrollLimit) {
this.bottomRubberPadding += 6 - this.bottomRubberPadding / 4;
if (this.bottomRubberPadding > 20) this.onCallback(-1);
if (this.bottomRubberPadding > this.bottomProximityThreshold) this.onCallback(-1);
} else {
this.onScroll();
}
@ -221,9 +234,11 @@
const scrollDirection = Math.sign(this.lastScroll - el.scrollTop); // IE has no Math.sign, check that webpack polyfills this
const displacement = el.scrollHeight - el.clientHeight - el.scrollTop;
if (scrollDirection == -1 && displacement <= dragConfig.sensitivity) {
const topNegativeProximity = this.topProximityThreshold < 0 ? this.topProximityThreshold : 0;
const bottomNegativeProximity = this.bottomProximityThreshold < 0 ? this.bottomProximityThreshold : 0;
if (scrollDirection == -1 && displacement + bottomNegativeProximity <= dragConfig.sensitivity) {
this.reachedBottomScrollLimit = true;
} else if (scrollDirection >= 0 && el.scrollTop == 0) {
} else if (scrollDirection >= 0 && el.scrollTop + topNegativeProximity <= 0) {
this.reachedTopScrollLimit = true;
} else {
this.reachedTopScrollLimit = false;