docs(PullRefresh): add custom tip demo

src/pull-refresh/README.md

@@ -36,7 +36,7 @@ export default {
         this.$toast('Refresh Success');
         this.isLoading = false;
         this.count++;
-      }, 500);
+      }, 1000);
     }
   }
 }
@@ -56,6 +56,42 @@ Use `success-text` to set the success prompt after the refresh is successful
 </van-pull-refresh>
 ```
 
+### Custom Tips
+
+Use slots to custom tips
+
+```html
+<van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
+  <img
+    class="doge"
+    slot="pulling"
+    slot-scope="props"
+    src="https://img.yzcdn.cn/vant/doge.png"
+    :style="{ transform: `scale(${props.distance / 80})` }"
+  >
+  <img
+    class="doge"
+    slot="loosing"
+    src="https://img.yzcdn.cn/vant/doge.png"
+  >
+  <img
+    class="doge"
+    slot="loading"
+    src="https://img.yzcdn.cn/vant/doge-fire.jpg"
+  >
+  <p>Refresh Count: {{ count }}</p>
+</van-pull-refresh>
+
+<style>
+.doge {
+  width: 140px;
+  height: 72px;
+  margin-top: 8px;
+  border-radius: 4px;
+}
+</style>
+```
+
 ## API
 
 ### Props
@@ -69,7 +105,7 @@ Use `success-text` to set the success prompt after the refresh is successful
 | success-text | Text to show when loading success | *string* | - | - |
 | success-duration | Success text display duration(ms) | *number* | `500` | - |
 | animation-duration | Animation duration | *number* | `300` | - |
-| head-height | Height of head | *number* | `50` | - |
+| head-height | Height of head | *number* | `50` | 2.4.2 |
 | disabled | Whether to disable pull refresh | *boolean* | `false` | - |
 
 ### Events

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

@@ -36,13 +36,13 @@ export default {
         this.$toast('刷新成功');
         this.isLoading = false;
         this.count++;
-      }, 500);
+      }, 1000);
     }
   }
 }
 ```
 
-### 刷新成功提示
+### 成功提示
 
 通过`success-text`可以设置刷新成功后的顶部提示文案
 
@@ -56,6 +56,45 @@ export default {
 </van-pull-refresh>
 ```
 
+### 自定义提示
+
+通过插槽可以自定义下拉刷新过程中的提示内容
+
+```html
+<van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
+  <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
+  <img
+    class="doge"
+    slot="pulling"
+    slot-scope="props"
+    src="https://img.yzcdn.cn/vant/doge.png"
+    :style="{ transform: `scale(${props.distance / 80})` }"
+  >
+  <!-- 释放提示 -->
+  <img
+    class="doge"
+    slot="loosing"
+    src="https://img.yzcdn.cn/vant/doge.png"
+  >
+  <!-- 加载提示 -->
+  <img
+    class="doge"
+    slot="loading"
+    src="https://img.yzcdn.cn/vant/doge-fire.jpg"
+  >
+  <p>刷新次数: {{ count }}</p>
+</van-pull-refresh>
+
+<style>
+.doge {
+  width: 140px;
+  height: 72px;
+  margin-top: 8px;
+  border-radius: 4px;
+}
+</style>
+```
+
 ## API
 
 ### Props
@@ -69,7 +108,7 @@ export default {
 | success-text | 刷新成功提示文案 | *string* | - | - |
 | success-duration | 刷新成功提示展示时长(ms) | *number* | `500` | - |
 | animation-duration | 动画时长 | *number* | `300` | - |
-| head-height | 顶部内容高度 | *number* | `50` | - |
+| head-height | 顶部内容高度 | *number* | `50` | 2.4.2 |
 | disabled | 是否禁用下拉刷新 | *boolean* | `false` | - |
 
 ### Events

src/pull-refresh/demo/index.vue

@@ -16,6 +16,31 @@
           <p>{{ tips }}</p>
         </van-pull-refresh>
       </van-tab>
+
+      <van-tab :title="$t('customTips')">
+        <van-pull-refresh
+          v-model="isLoading"
+          :head-height="80"
+          @refresh="onRefresh(true)"
+        >
+          <template #pulling="{ distance }">
+            <img
+              class="doge"
+              src="https://b.yzcdn.cn/vant/doge.png"
+              :style="{
+                transform: `scale(${distance / 80})`
+              }"
+            >
+          </template>
+          <template #loosing>
+            <img src="https://b.yzcdn.cn/vant/doge.png" class="doge">
+          </template>
+          <template #loading>
+            <img src="https://b.yzcdn.cn/vant/doge-fire.jpg" class="doge">
+          </template>
+          <p>{{ tips }}</p>
+        </van-pull-refresh>
+      </van-tab>
     </van-tabs>
   </demo-section>
 </template>
@@ -24,16 +49,18 @@
 export default {
   i18n: {
     'zh-CN': {
+      try: '下拉试试',
       text: '刷新次数',
       success: '刷新成功',
-      successTip: '刷新成功提示',
+      successTip: '成功提示',
-      try: '下拉试试'
+      customTips: '自定义提示'
     },
     'en-US': {
+      try: 'Try it down',
       text: 'Refresh Count',
       success: 'Refresh success',
       successTip: 'Success Tip',
-      try: 'Try it down'
+      customTips: 'Custom Tips'
     }
   },
 
@@ -54,7 +81,20 @@ export default {
     }
   },
 
+  mounted() {
+    this.preloadImage();
+  },
+
   methods: {
+    preloadImage() {
+      // preload doge image
+      const doge = new Image();
+      const dogeFire = new Image();
+
+      doge.src = 'https://b.yzcdn.cn/vant/doge.png';
+      dogeFire.src = 'https://b.yzcdn.cn/vant/doge-fire.jpg';
+    },
+
     onRefresh(showToast) {
       setTimeout(() => {
         if (showToast) {
@@ -63,7 +103,7 @@ export default {
 
         this.isLoading = false;
         this.count++;
-      }, 500);
+      }, 1000);
     }
   }
 };
@@ -82,6 +122,13 @@ export default {
     }
   }
 
+  .doge {
+    width: 140px;
+    height: 72px;
+    margin-top: 8px;
+    border-radius: 4px;
+  }
+
   p {
     margin: 0;
     padding: @padding-md 0 0 @padding-md;

src/pull-refresh/index.less

@@ -11,7 +11,6 @@
 
   &__head {
     position: absolute;
-    top: -@pull-refresh-head-height;
     left: 0;
     width: 100%;
     height: @pull-refresh-head-height;
@@ -20,5 +19,6 @@
     font-size: @pull-refresh-head-font-size;
     line-height: @pull-refresh-head-height;
     text-align: center;
+    transform: translateY(-100%);
   }
 }

src/pull-refresh/test/__snapshots__/demo.spec.js.snap

@@ -6,7 +6,8 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs__wrap van-hairline--top-bottom">
       <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
         <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">基础用法<!----></span></div>
-        <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">刷新成功提示<!----></span></div>
+        <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">成功提示<!----></span></div>
+        <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">自定义提示<!----></span></div>
         <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
       </div>
     </div>
@@ -22,6 +23,9 @@ exports[`renders demo correctly 1`] = `
       <div role="tabpanel" class="van-tab__pane" style="display: none;">
         <!---->
       </div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
     </div>
   </div>
 </div>

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

@@ -105,3 +105,11 @@ exports[`render success text 2`] = `
   </div>
 </div>
 `;
+
+exports[`should set height when using head-height 1`] = `
+<div class="van-pull-refresh">
+  <div class="van-pull-refresh__track" style="transition-duration: 0ms;">
+    <div class="van-pull-refresh__head" style="height: 100px;"></div>
+  </div>
+</div>
+`;

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

@@ -156,3 +156,13 @@ test('render success slot', async () => {
   wrapper.setProps({ value: false });
   expect(wrapper).toMatchSnapshot();
 });
+
+test('should set height when using head-height', async () => {
+  const wrapper = mount(PullRefresh, {
+    propsData: {
+      headHeight: 100
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});