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

Merge pull request #2194 from SergioCrisostomo/add-scroll-distance-to-edge

Browse source 
add distance-to-edge property
This commit is contained in:
Aresn 2017-10-26 00:14:52 -05:00 • committed by GitHub
commit 86cdfb872c
1 changed files with 19 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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