optimize Scroll scroll behavior
This commit is contained in:
parent
6850c1da89
commit
109465d3c5
2 changed files with 17 additions and 9 deletions
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<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">
|
<section v-for="item in list">
|
||||||
<div class="city">
|
<div class="city">
|
||||||
<p>{{ item }}</p>
|
<p>{{ item }}</p>
|
||||||
|
|
|
@ -31,6 +31,8 @@
|
||||||
minimumStartDragOffset: 5, // minimum start drag offset
|
minimumStartDragOffset: 5, // minimum start drag offset
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const noop = () => Promise.resolve();
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Scroll',
|
name: 'Scroll',
|
||||||
mixins: [],
|
mixins: [],
|
||||||
|
@ -41,16 +43,13 @@
|
||||||
default: 300
|
default: 300
|
||||||
},
|
},
|
||||||
onReachTop: {
|
onReachTop: {
|
||||||
type: Function,
|
type: Function
|
||||||
default: () => Promise.resolve()
|
|
||||||
},
|
},
|
||||||
onReachBottom: {
|
onReachBottom: {
|
||||||
type: Function,
|
type: Function
|
||||||
default: () => Promise.resolve()
|
|
||||||
},
|
},
|
||||||
onReachEdge: {
|
onReachEdge: {
|
||||||
type: Function,
|
type: Function
|
||||||
default: () => Promise.resolve()
|
|
||||||
},
|
},
|
||||||
loadingText: {
|
loadingText: {
|
||||||
type: String,
|
type: String,
|
||||||
|
@ -134,8 +133,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const callbacks = [this.waitOneSecond(), this.onReachEdge(dir)];
|
const callbacks = [this.waitOneSecond(), this.onReachEdge ? this.onReachEdge(dir) : noop()];
|
||||||
callbacks.push(dir > 0 ? this.onReachTop() : this.onReachBottom());
|
callbacks.push(dir > 0 ? this.onReachTop ? this.onReachTop() : noop() : this.onReachBottom ? this.onReachBottom() : noop());
|
||||||
|
|
||||||
let tooSlow = setTimeout(() => {
|
let tooSlow = setTimeout(() => {
|
||||||
this.reset();
|
this.reset();
|
||||||
|
@ -183,6 +182,15 @@
|
||||||
stretchEdge(direction) {
|
stretchEdge(direction) {
|
||||||
clearTimeout(this.rubberRollBackTimeout);
|
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
|
// if the scroll is not strong enough, lets reset it
|
||||||
this.rubberRollBackTimeout = setTimeout(() => {
|
this.rubberRollBackTimeout = setTimeout(() => {
|
||||||
if (!this.isLoading) this.reset();
|
if (!this.isLoading) this.reset();
|
||||||
|
|
Loading…
Add table
Reference in a new issue