optimize Scroll scroll behavior

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

View file

@ -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>

View file

@ -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();