feat(PullRefresh): add pull-distance prop (#8280)

src/pull-refresh/README.md

@@ -110,6 +110,7 @@ Use slots to custom tips.
 | success-duration | Success text display duration(ms) | _number \| string_ | `500` |
 | animation-duration | Animation duration | _number \| string_ | `300` |
 | head-height | Height of head | _number \| string_ | `50` |
+| pull-distance `v3.0.8` | The distance to trigger the pull refresh | _number \| string_ | same as `head-height` |
 | disabled | Whether to disable pull refresh | _boolean_ | `false` |
 
 ### Events

src/pull-refresh/README.zh-CN.md

@@ -117,6 +117,7 @@ export default {
 | success-duration | 刷新成功提示展示时长(ms) | _number \| string_ | `500` |
 | animation-duration | 动画时长 | _number \| string_ | `300` |
 | head-height | 顶部内容高度 | _number \| string_ | `50` |
+| pull-distance `v3.0.8` | 触发下拉刷新的距离 | _number \| string_ | 与 `head-height` 一致 |
 | disabled | 是否禁用下拉刷新 | _boolean_ | `false` |
 
 ### Events

src/pull-refresh/index.tsx

@@ -29,6 +29,7 @@ export default createComponent({
     pullingText: String,
     loosingText: String,
     loadingText: String,
+    pullDistance: [Number, String],
     modelValue: {
       type: Boolean,
       default: false,
@@ -77,13 +78,13 @@ export default createComponent({
       !props.disabled;
 
     const ease = (distance: number) => {
-      const headHeight = +props.headHeight;
+      const pullDistance = +(props.pullDistance || props.headHeight);
 
-      if (distance > headHeight) {
+      if (distance > pullDistance) {
-        if (distance < headHeight * 2) {
+        if (distance < pullDistance * 2) {
-          distance = headHeight + (distance - headHeight) / 2;
+          distance = pullDistance + (distance - pullDistance) / 2;
         } else {
-          distance = headHeight * 1.5 + (distance - headHeight * 2) / 4;
+          distance = pullDistance * 1.5 + (distance - pullDistance * 2) / 4;
         }
       }
 
@@ -91,13 +92,14 @@ export default createComponent({
     };
 
     const setStatus = (distance: number, isLoading?: boolean) => {
+      const pullDistance = +(props.pullDistance || props.headHeight);
       state.distance = distance;
 
       if (isLoading) {
         state.status = 'loading';
       } else if (distance === 0) {
         state.status = 'normal';
-      } else if (distance < props.headHeight) {
+      } else if (distance < pullDistance) {
         state.status = 'pulling';
       } else {
         state.status = 'loosing';

src/pull-refresh/test/__snapshots__/index.spec.ts.snap

@@ -1,5 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should allow to custom pull distance 1`] = `
+<div class="van-pull-refresh">
+  <div class="van-pull-refresh__track"
+       style="transition-duration: 0ms; transform: translate3d(0,100px, 0);"
+  >
+    <div class="van-pull-refresh__head">
+      <div class="van-pull-refresh__text">
+        Pull to refresh...
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`should render different head content in different pulling status 1`] = `
 <div class="van-pull-refresh">
   <div class="van-pull-refresh__track"

src/pull-refresh/test/index.spec.ts

@@ -150,3 +150,17 @@ test('should set height when using head-height', async () => {
   const head = wrapper.find('.van-pull-refresh__head');
   expect(head.style.height).toEqual('100px');
 });
+
+test('should allow to custom pull distance', async () => {
+  const wrapper = mount(PullRefresh, {
+    props: {
+      pullDistance: 300,
+    },
+  });
+  const track = wrapper.find('.van-pull-refresh__track');
+
+  trigger(track, 'touchstart', 0, 0);
+  trigger(track, 'touchmove', 0, 100);
+  await later();
+  expect(wrapper.html()).toMatchSnapshot();
+});