diff --git a/src/pull-refresh/index.js b/src/pull-refresh/index.js index 9ddae13c2..66861f4e1 100644 --- a/src/pull-refresh/index.js +++ b/src/pull-refresh/index.js @@ -43,8 +43,10 @@ export default createComponent({ }, computed: { - untouchable() { - return this.status === 'loading' || this.status === 'success' || this.disabled; + touchable() { + return ( + this.status !== 'loading' && this.status !== 'success' && !this.disabled + ); } }, @@ -54,6 +56,7 @@ export default createComponent({ if (!loading && this.successText) { this.status = 'success'; + setTimeout(() => { this.setStatus(0); }, this.successDuration); @@ -69,36 +72,40 @@ export default createComponent({ }, methods: { - onTouchStart(event) { - if (!this.untouchable && this.getCeiling()) { + checkPullStart(event) { + this.ceiling = getScrollTop(this.scrollEl) === 0; + + if (this.ceiling) { this.duration = 0; this.touchStart(event); } }, + onTouchStart(event) { + if (this.touchable) { + this.checkPullStart(event); + } + }, + onTouchMove(event) { - if (this.untouchable) { + if (!this.touchable) { return; } + if (!this.ceiling) { + this.checkPullStart(event); + } + this.touchMove(event); - if (!this.ceiling && this.getCeiling()) { - this.duration = 0; - this.startY = event.touches[0].clientY; - this.deltaY = 0; - } - - if (this.ceiling && this.deltaY >= 0) { - if (this.direction === 'vertical') { - this.setStatus(this.ease(this.deltaY)); - preventDefault(event); - } + if (this.ceiling && this.deltaY >= 0 && this.direction === 'vertical') { + preventDefault(event); + this.setStatus(this.ease(this.deltaY)); } }, onTouchEnd() { - if (!this.untouchable && this.ceiling && this.deltaY) { + if (this.touchable && this.ceiling && this.deltaY) { this.duration = this.animationDuration; if (this.status === 'loosing') { @@ -115,56 +122,70 @@ export default createComponent({ } }, - getCeiling() { - this.ceiling = getScrollTop(this.scrollEl) === 0; - return this.ceiling; - }, - ease(distance) { const { headHeight } = this; - return Math.round( - distance < headHeight - ? distance - : distance < headHeight * 2 - ? headHeight + (distance - headHeight) / 2 - : headHeight * 1.5 + (distance - headHeight * 2) / 4 - ); + + if (distance > headHeight) { + if (distance < headHeight * 2) { + distance = headHeight + (distance - headHeight) / 2; + } else { + distance = headHeight * 1.5 + (distance - headHeight * 2) / 4; + } + } + + return Math.round(distance); }, setStatus(distance, isLoading) { - this.distance = distance; + let status; + if (isLoading) { + status = 'loading'; + } else if (distance === 0) { + status = 'normal'; + } else { + status = distance < this.headHeight ? 'pulling' : 'loosing'; + } - const status = isLoading - ? 'loading' - : distance === 0 - ? 'normal' - : distance < this.headHeight - ? 'pulling' - : 'loosing'; + this.distance = distance; if (status !== this.status) { this.status = status; } + }, + + genStatus() { + const { status, distance } = this; + const slot = this.slots(status, { distance }); + + if (slot) { + return slot; + } + + const nodes = []; + const text = this[`${status}Text`] || t(status); + + if (TEXT_STATUS.indexOf(status) !== -1) { + nodes.push(
{text}
); + } + + if (status === 'loading') { + nodes.push({text}); + } + + return nodes; } }, render() { - const { status, distance } = this; - const text = this[`${status}Text`] || t(status); const style = { transitionDuration: `${this.duration}ms`, transform: this.distance ? `translate3d(0,${this.distance}px, 0)` : '' }; - const Status = this.slots(status, { distance }) || [ - TEXT_STATUS.indexOf(status) !== -1 &&
{text}
, - status === 'loading' && {text} - ]; - return (
-
{Status}
+
{this.genStatus()}
{this.slots()}