feat: 新增pull-down-refresh组件

site/docs.config.js

@@ -275,6 +275,12 @@ export default {
           path: '/vue-mobile/components/back-top',
           component: () => import('@/back-top/back-top.md'),
         },
+        {
+          title: 'PullDownRefresh 下拉刷新',
+          name: 'pull-down-refresh',
+          path: '/vue-mobile/components/pull-down-refresh',
+          component: () => import('@/pull-down-refresh/pull-down-refresh.md'),
+        },
         // {
         //   title: 'ActionSheet 动作面板',
         //   name: 'action-sheet',

src/components.ts

@@ -44,6 +44,7 @@ export { default as SwipeCell } from './swipe-cell';
 export { default as Skeleton } from './skeleton';
 export { Grid, GridItem } from './grid';
 export { default as Sticky } from './sticky';
-export { default as List, PullRefresh } from './list';
+export { default as List } from './list';
 export { default as Loading } from './loading';
 export { default as BackTop } from './back-top';
+export { default as PullDownRefresh } from './pull-down-refresh';

src/list/demos/mobile.vue

@@ -21,13 +21,13 @@
         </t-tab-panel>
         <t-tab-panel value="pull-refresh" label="下拉刷新">
           <div class="pull-refresh-wrap">
-            <t-pull-refresh v-model="refreshing" @refresh="onRefresh">
+            <t-pull-down-refresh v-model="refreshing" @refresh="onRefresh">
               <t-list :async-loading="pullloading" @scroll="(e) => onScroll(e, 2)">
                 <t-cell v-for="item in listPull" :key="item" align="middle">
                   <span class="cell">{{ item }}</span>
                 </t-cell>
               </t-list>
-            </t-pull-refresh>
+            </t-pull-down-refresh>
           </div>
         </t-tab-panel>
       </t-tabs>

src/list/demos/pull-refresh.vue

@@ -1,11 +1,11 @@
 <template>
-  <t-pull-refresh v-model="refreshing" @refresh="onRefresh">
+  <t-pull-down-refresh v-model="refreshing" @refresh="onRefresh">
     <t-list :async-loading="pullloading" @scroll="(e) => onScroll(e, 2)">
       <t-cell v-for="item in listPull" :key="item" align="middle">
         <span class="cell">{{ item }}</span>
       </t-cell>
     </t-list>
-  </t-pull-refresh>
+  </t-pull-down-refresh>
 </template>
 
 <script lang="ts">

src/list/index.ts

@@ -1,5 +1,4 @@
 import List from './list.vue';
-import TPullRefresh from './pull-refresh.vue';
 import { withInstall, WithInstallType } from '../shared';
 
 import { TdListProps } from './type';
@@ -9,5 +8,4 @@ export * from './type';
 export type ListProps = TdListProps;
 
 const _List: WithInstallType<typeof List> = withInstall(List);
-export const PullRefresh: WithInstallType<typeof TPullRefresh> = withInstall(TPullRefresh);
 export default _List;

src/pull-down-refresh/demos/base.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="tdesign-mobile-demo">
+    <tdesign-demo-block title="" summary="">
+      <t-pull-down-refresh v-model="refreshing" @refresh="handleRefresh">下拉刷新</t-pull-down-refresh>
+    </tdesign-demo-block>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent } from 'vue';
+
+export default defineComponent({
+  setup(props, context) {
+    const refreshing = ref(false);
+    const handleRefresh = (value: any) => {
+      refreshing.value = true;
+      setTimeout(() => {
+        refreshing.value = false;
+      }, 1000);
+    };
+    return {
+      refreshing,
+      handleRefresh,
+    };
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+});
+</script>
+
+<style lang="less" scoped></style>

src/pull-down-refresh/demos/loading-texts.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="tdesign-mobile-demo">
+    <tdesign-demo-block title="" summary="">
+      <t-pull-down-refresh
+        v-model="refreshing"
+        :loading-texts="['下拉即可刷新...', '释放即可刷新...', '加载中...', '刷新成功']"
+        :max-bar-height="100"
+        :loading-bar-height="70"
+        @refresh="handleRefresh"
+        >下拉刷新</t-pull-down-refresh
+      >
+    </tdesign-demo-block>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent } from 'vue';
+
+export default defineComponent({
+  setup(props, context) {
+    const refreshing = ref(false);
+    const handleRefresh = (value: any) => {
+      refreshing.value = true;
+      setTimeout(() => {
+        refreshing.value = false;
+      }, 1000);
+    };
+    return {
+      refreshing,
+      handleRefresh,
+    };
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+});
+</script>
+
+<style lang="less" scoped></style>

src/pull-down-refresh/demos/mobile.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="tdesign-mobile-demo">
+    <!-- <h1 class="title">PullDownRefresh 下拉刷新</h1>
+    <p class="summary">用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。</p>
+    <p class="blank"></p> -->
+    <tdesign-demo-block title="" summary="">
+      <t-tabs default-value="first" @on-change="onChange">
+        <t-tab-panel value="first" label="基础用法">
+          <div class="refresh-content">
+            <t-pull-down-refresh v-model="refreshing1" class="demo-pull-down-refresh" @refresh="handleRefresh(1)"
+              ><div class="content-text">已下拉{{ refreshCount1 }}次</div></t-pull-down-refresh
+            >
+          </div>
+        </t-tab-panel>
+        <t-tab-panel value="second" label="自定义文案">
+          <div class="refresh-content">
+            <t-pull-down-refresh
+              v-model="refreshing2"
+              class="demo-pull-down-refresh"
+              :loading-texts="['下拉即可刷新...', '释放即可刷新...', '加载中...', '刷新成功']"
+              @refresh="handleRefresh(2)"
+            >
+              <div class="content-text">已下拉{{ refreshCount2 }}次</div></t-pull-down-refresh
+            >
+          </div>
+        </t-tab-panel>
+        <t-tab-panel value="third" label="超时事件">
+          <div class="refresh-content">
+            <t-pull-down-refresh
+              v-model="refreshing3"
+              class="demo-pull-down-refresh"
+              :loading-texts="['下拉即可刷新...', '释放即可刷新...', '加载中...', '刷新成功']"
+              :refresh-timeout="1000"
+              @refresh="handleRefresh(3)"
+              @timeout="handleTimeout"
+              ><div class="content-text">已下拉{{ refreshCount3 }}次</div></t-pull-down-refresh
+            >
+          </div>
+        </t-tab-panel>
+      </t-tabs>
+    </tdesign-demo-block>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent, reactive } from 'vue';
+import { Toast } from '@/components';
+
+export default defineComponent({
+  setup(props, context) {
+    const refreshing1 = ref(false);
+    const refreshCount1 = ref(0);
+    const refreshing2 = ref(false);
+    const refreshCount2 = ref(0);
+    const refreshing3 = ref(false);
+    const refreshCount3 = ref(0);
+    const handleRefresh = (value: any) => {
+      if (value === 1) {
+        refreshing1.value = true;
+        setTimeout(() => {
+          refreshing1.value = false;
+          refreshCount1.value = 1 + refreshCount1.value;
+        }, 1000);
+      } else if (value === 2) {
+        refreshing2.value = true;
+        setTimeout(() => {
+          refreshing2.value = false;
+          refreshCount2.value = 1 + refreshCount2.value;
+        }, 1000);
+      } else {
+        refreshing3.value = true;
+        setTimeout(() => {
+          refreshing3.value = false;
+          refreshCount3.value = 1 + refreshCount3.value;
+        }, 2000);
+      }
+    };
+    const handleTimeout = () => {
+      Toast('已超时');
+    };
+    return {
+      refreshing1,
+      refreshing2,
+      refreshing3,
+      refreshCount1,
+      refreshCount2,
+      refreshCount3,
+      handleRefresh,
+      handleTimeout,
+    };
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+});
+</script>
+
+<style lang="less" scoped>
+.blank {
+  height: 30px;
+}
+.demo-pull-down-refresh {
+  height: calc(100vh - 95px);
+}
+.refresh-content {
+  padding: 0 16px;
+  .content-text {
+    padding: 20px 0;
+  }
+}
+</style>

src/pull-down-refresh/demos/timeout.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="tdesign-mobile-demo">
+    <tdesign-demo-block title="" summary="">
+      <t-pull-down-refresh
+        v-model="refreshing"
+        :refresh-timeout="1000"
+        @timeout="handleTimeout"
+        @refresh="handleRefresh"
+        >下拉刷新</t-pull-down-refresh
+      >
+    </tdesign-demo-block>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent } from 'vue';
+import { Toast } from '@/components';
+
+export default defineComponent({
+  setup(props, context) {
+    const refreshing = ref(false);
+    const handleRefresh = (value: any) => {
+      refreshing.value = true;
+      setTimeout(() => {
+        refreshing.value = false;
+      }, 1000);
+    };
+    const handleTimeout = () => {
+      Toast('已超时');
+    };
+    return {
+      refreshing,
+      handleRefresh,
+      handleTimeout,
+    };
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+});
+</script>
+
+<style lang="less" scoped></style>

src/pull-down-refresh/index.ts

@@ -0,0 +1,10 @@
+import PullDownRefresh from './pull-down-refresh.vue';
+import { withInstall, WithInstallType } from '../shared';
+
+import './style';
+import { TdPullDownRefreshProps } from './type';
+
+export * from './type';
+export type PullDownRefreshProps = TdPullDownRefreshProps;
+const _PullDownRefresh: WithInstallType<typeof PullDownRefresh> = withInstall(PullDownRefresh);
+export default _PullDownRefresh;

src/pull-down-refresh/props.ts

@@ -0,0 +1,42 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+ import { TdPullDownRefreshProps } from './type';
+ import { PropType } from 'vue';
+
+ export default {
+   modelValue: {
+     type: Boolean,
+   },
+   /** 加载中下拉高度 */
+   loadingBarHeight: {
+     type: Number,
+     default: 50,
+   },
+   /** 加载loading样式 */
+   loadingProps: {
+     type: Object as PropType<TdPullDownRefreshProps['loadingProps']>,
+   },
+   /** 提示语，组件内部默认值为 ['下拉刷新', '松手刷新', '正在刷新', '刷新完成'] */
+   loadingTexts: {
+     type: Array as PropType<TdPullDownRefreshProps['loadingTexts']>,
+     default: (): TdPullDownRefreshProps['loadingTexts'] => [],
+   },
+   /** 最大下拉高度 */
+   maxBarHeight: {
+     type: Number,
+     default: 80,
+   },
+   /** 刷新超时时间 */
+   refreshTimeout: {
+     type: Number,
+     default: 3000,
+   },
+   /** 结束下拉时触发 */
+   onRefresh: Function as PropType<TdPullDownRefreshProps['onRefresh']>,
+   /** 刷新超时触发 */
+   onTimeout: Function as PropType<TdPullDownRefreshProps['onTimeout']>,
+ };

src/pull-down-refresh/pull-down-refresh.md

@@ -0,0 +1,22 @@
+:: BASE_DOC ::
+
+## API
+
+### PullDownRefresh Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+loadingBarHeight | Number | 200 | 加载中下拉高度 | N
+loadingProps | Object | - | 加载loading样式。TS 类型：`TdLoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/pull-down-refresh/type.ts) | N
+loadingTexts | Array | [] | 提示语，组件内部默认值为 ['下拉刷新', '松手刷新', '正在刷新', '刷新完成']。TS 类型：`string[]` | N
+maxBarHeight | Number | 272 | 最大下拉高度 | N
+refreshTimeout | Number | 3000 | 刷新超时时间 | N
+onRefresh | Function |  | TS 类型：`() => void`<br/>结束下拉时触发 | N
+onTimeout | Function |  | TS 类型：`() => void`<br/>刷新超时触发 | N
+
+### PullDownRefresh Events
+
+名称 | 参数 | 描述
+-- | -- | --
+refresh | - | 结束下拉时触发
+timeout | - | 刷新超时触发