diff --git a/src/pull-refresh/README.md b/src/pull-refresh/README.md index 9e20f4647..47ff7a4bf 100644 --- a/src/pull-refresh/README.md +++ b/src/pull-refresh/README.md @@ -55,7 +55,7 @@ export default { | success-duration | Success text display duration(ms) | `Number` | `500` | | animation-duration | Animation duration | `Number` | `300` | | head-height | Height of head | `Number` | `50` | -| disabled | Whether to disable | `Boolean` | `false` | +| disabled | Whether to disable pull refresh | `Boolean` | `false` | ### Events @@ -65,10 +65,10 @@ export default { ### Slots -| Name | Description | -|------|------| -| default | Default slot | -| normal | Content of head when at normal status | -| pulling | Content of head when at pulling | -| loosing | Content of head when at loosing | -| loading | Content of head when at loading | +| Name | Description | scoped-slot | +|------|------|------| +| default | Default slot | - | +| normal | Content of head when at normal status | - | +| pulling | Content of head when at pulling | { distance } | +| loosing | Content of head when at loosing | { distance } | +| loading | Content of head when at loading | { distance } | diff --git a/src/pull-refresh/README.zh-CN.md b/src/pull-refresh/README.zh-CN.md index a2518c38e..16a419c23 100644 --- a/src/pull-refresh/README.zh-CN.md +++ b/src/pull-refresh/README.zh-CN.md @@ -65,10 +65,10 @@ export default { ### Slots -| 名称 | 说明 | -|------|------| -| default | 自定义内容 | -| normal | 非下拉状态时顶部内容 | -| pulling | 下拉过程中顶部内容 | -| loosing | 释放过程中顶部内容 | -| loading | 加载过程中顶部内容 | +| 名称 | 说明 | scoped-slot 参数 | +|------|------|------| +| default | 自定义内容 | - | +| normal | 非下拉状态时顶部内容 | - | +| pulling | 下拉过程中顶部内容 | { distance: 当前下拉距离 } | +| loosing | 释放过程中顶部内容 | { distance: 当前下拉距离 } | +| loading | 加载过程中顶部内容 | { distance: 当前下拉距离 } | diff --git a/src/pull-refresh/index.js b/src/pull-refresh/index.js index db6a58caf..f15a15a5e 100644 --- a/src/pull-refresh/index.js +++ b/src/pull-refresh/index.js @@ -37,7 +37,7 @@ export default createComponent({ data() { return { status: 'normal', - height: 0, + distance: 0, duration: 0 }; }, @@ -119,23 +119,25 @@ export default createComponent({ return this.ceiling; }, - ease(height) { + ease(distance) { const { headHeight } = this; - return height < headHeight - ? height - : height < headHeight * 2 - ? Math.round(headHeight + (height - headHeight) / 2) - : Math.round(headHeight * 1.5 + (height - headHeight * 2) / 4); + return Math.round( + distance < headHeight + ? distance + : distance < headHeight * 2 + ? headHeight + (distance - headHeight) / 2 + : headHeight * 1.5 + (distance - headHeight * 2) / 4 + ); }, - setStatus(height, isLoading) { - this.height = height; + setStatus(distance, isLoading) { + this.distance = distance; const status = isLoading ? 'loading' - : height === 0 + : distance === 0 ? 'normal' - : height < this.headHeight + : distance < this.headHeight ? 'pulling' : 'loosing'; @@ -146,14 +148,14 @@ export default createComponent({ }, render(h) { - const { status } = this; + const { status, distance } = this; const text = this[`${status}Text`] || t(status); const style = { transition: `${this.duration}ms`, - transform: this.height ? `translate3d(0,${this.height}px, 0)` : '' + transform: this.distance ? `translate3d(0,${this.distance}px, 0)` : '' }; - const Status = this.slots(status) || [ + const Status = this.slots(status, { distance }) || [ TEXT_STATUS.indexOf(status) !== -1 &&
{text}
, status === 'loading' && {text} ]; diff --git a/src/pull-refresh/test/__snapshots__/index.spec.js.snap b/src/pull-refresh/test/__snapshots__/index.spec.js.snap index be82e3e21..a63babeaf 100644 --- a/src/pull-refresh/test/__snapshots__/index.spec.js.snap +++ b/src/pull-refresh/test/__snapshots__/index.spec.js.snap @@ -48,6 +48,30 @@ exports[`change head content when pulling down 5`] = ` `; +exports[`custom content by slots 1`] = ` +
+
+
pulling 20
+
+
+`; + +exports[`custom content by slots 2`] = ` +
+
+
loosing 75
+
+
+`; + +exports[`custom content by slots 3`] = ` +
+
+
loading 50
+
+
+`; + exports[`not in page top 1`] = `
diff --git a/src/pull-refresh/test/index.spec.js b/src/pull-refresh/test/index.spec.js index 12bba11a6..7c37a9994 100644 --- a/src/pull-refresh/test/index.spec.js +++ b/src/pull-refresh/test/index.spec.js @@ -42,6 +42,37 @@ test('change head content when pulling down', async () => { expect(wrapper).toMatchSnapshot(); }); +test('custom content by slots', async () => { + const wrapper = mount(PullRefresh, { + scopedSlots: { + pulling({ distance }) { + return `pulling ${distance}`; + }, + loosing({ distance }) { + return `loosing ${distance}`; + }, + loading({ distance }) { + return `loading ${distance}`; + } + } + }); + + const track = wrapper.find('.van-pull-refresh__track'); + + // pulling + trigger(track, 'touchstart', 0, 0); + trigger(track, 'touchmove', 0, 20); + expect(wrapper).toMatchSnapshot(); + + // loosing + trigger(track, 'touchmove', 0, 100); + expect(wrapper).toMatchSnapshot(); + + // loading + trigger(track, 'touchend', 0, 100); + expect(wrapper).toMatchSnapshot(); +}); + test('pull a short distance', () => { const wrapper = mount(PullRefresh, { propsData: {