diff --git a/packages/pull-refresh/en-US.md b/packages/pull-refresh/en-US.md index 38a860d3d..82662c0d5 100644 --- a/packages/pull-refresh/en-US.md +++ b/packages/pull-refresh/en-US.md @@ -47,6 +47,8 @@ export default { | pulling-text | Text to show when pulling | `String` | `Pull to refresh...` | | loosing-text | Text to show when loosing | `String` | `Loose to refresh...` | | loading-text | Text to show when loading | `String` | `Loading...` | +| success-text | Text to show when loading success | `String` | - | +| success-duration | Success text display duration(ms) | `String` | 500 | | animation-duration | Animation duration | `Number` | `300` | | head-height | Height of head | `Number` | `50` | | disabled | Whether to disable | `Boolean` | `false` | diff --git a/packages/pull-refresh/index.js b/packages/pull-refresh/index.js index e7c145330..650416d53 100644 --- a/packages/pull-refresh/index.js +++ b/packages/pull-refresh/index.js @@ -4,12 +4,14 @@ import Touch from '../mixins/touch'; import { getScrollTop, getScrollEventTarget } from '../utils/scroll'; const [sfc, bem, t] = use('pull-refresh'); +const TEXT_STATUS = ['pulling', 'loosing', 'success']; export default sfc({ mixins: [Touch], props: { disabled: Boolean, + successText: String, pullingText: String, loosingText: String, loadingText: String, @@ -17,6 +19,10 @@ export default sfc({ type: Boolean, required: true }, + successDuration: { + type: Number, + default: 500 + }, animationDuration: { type: Number, default: 300 @@ -37,14 +43,22 @@ export default sfc({ computed: { untouchable() { - return this.status === 'loading' || this.disabled; + return this.status === 'loading' || this.status === 'success' || this.disabled; } }, watch: { - value(val) { + value(loading) { this.duration = this.animationDuration; - this.getStatus(val ? this.headHeight : 0, val); + + if (!loading && this.successText) { + this.status = 'success'; + setTimeout(() => { + this.setStatus(0); + }, this.successDuration); + } else { + this.setStatus(loading ? this.headHeight : 0, loading); + } } }, @@ -75,7 +89,7 @@ export default sfc({ if (this.ceiling && this.deltaY >= 0) { if (this.direction === 'vertical') { - this.getStatus(this.ease(this.deltaY)); + this.setStatus(this.ease(this.deltaY)); event.cancelable && event.preventDefault(); } } @@ -85,11 +99,11 @@ export default sfc({ if (!this.untouchable && this.ceiling && this.deltaY) { this.duration = this.animationDuration; if (this.status === 'loosing') { - this.getStatus(this.headHeight, true); + this.setStatus(this.headHeight, true); this.$emit('input', true); this.$emit('refresh'); } else { - this.getStatus(0); + this.setStatus(0); } } }, @@ -108,7 +122,7 @@ export default sfc({ : Math.round(headHeight * 1.5 + (height - headHeight * 2) / 4); }, - getStatus(height, isLoading) { + setStatus(height, isLoading) { this.height = height; const status = isLoading @@ -134,7 +148,7 @@ export default sfc({ }; const Status = this.slots(status) || [ - (status === 'pulling' || status === 'loosing') &&