diff --git a/site/docs.config.js b/site/docs.config.js
index 97c1dadea..a0abee74d 100644
--- a/site/docs.config.js
+++ b/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',
diff --git a/src/_common b/src/_common
index c5b5d2dd5..1710b1b9a 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit c5b5d2dd5c9c086965d05cb10117bfd79d981ac5
+Subproject commit 1710b1b9a0e3ba7bce05047831a8fe6216d67f29
diff --git a/src/components.ts b/src/components.ts
index 266a91cdd..792abb596 100644
--- a/src/components.ts
+++ b/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';
diff --git a/src/list/demos/mobile.vue b/src/list/demos/mobile.vue
index 99af83404..0f527d405 100644
--- a/src/list/demos/mobile.vue
+++ b/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>
diff --git a/src/list/demos/pull-refresh.vue b/src/list/demos/pull-refresh.vue
index 93e8b8a89..f03258851 100644
--- a/src/list/demos/pull-refresh.vue
+++ b/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">
diff --git a/src/list/index.ts b/src/list/index.ts
index e40cd540e..c4558b9b3 100644
--- a/src/list/index.ts
+++ b/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;
diff --git a/src/pull-down-refresh/demos/base.vue b/src/pull-down-refresh/demos/base.vue
new file mode 100644
index 000000000..98aafe4b4
--- /dev/null
+++ b/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>
diff --git a/src/pull-down-refresh/demos/loading-texts.vue b/src/pull-down-refresh/demos/loading-texts.vue
new file mode 100644
index 000000000..7db6281cb
--- /dev/null
+++ b/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>
diff --git a/src/pull-down-refresh/demos/mobile.vue b/src/pull-down-refresh/demos/mobile.vue
new file mode 100644
index 000000000..30d267cef
--- /dev/null
+++ b/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>
diff --git a/src/pull-down-refresh/demos/timeout.vue b/src/pull-down-refresh/demos/timeout.vue
new file mode 100644
index 000000000..af3da0000
--- /dev/null
+++ b/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>
diff --git a/src/pull-down-refresh/index.ts b/src/pull-down-refresh/index.ts
new file mode 100644
index 000000000..4a440f009
--- /dev/null
+++ b/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;
diff --git a/src/pull-down-refresh/props.ts b/src/pull-down-refresh/props.ts
new file mode 100644
index 000000000..bd9e65a78
--- /dev/null
+++ b/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']>,
+ };
\ No newline at end of file
diff --git a/src/pull-down-refresh/pull-down-refresh.md b/src/pull-down-refresh/pull-down-refresh.md
new file mode 100644
index 000000000..f2794f1d2
--- /dev/null
+++ b/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 | - | 刷新超时触发
\ No newline at end of file
diff --git a/src/pull-down-refresh/pull-down-refresh.vue b/src/pull-down-refresh/pull-down-refresh.vue
new file mode 100644
index 000000000..891b25e16
--- /dev/null
+++ b/src/pull-down-refresh/pull-down-refresh.vue
@@ -0,0 +1,202 @@
+<template>
+  <div :class="name">
+    <div
+      :class="`${name}__track`"
+      :style="trackStyle"
+      @touchstart.stop="onTouchStart"
+      @touchmove.stop="onTouchMove"
+      @touchend.stop="onTouchEnd"
+      @touchcancel.stop="onTouchEnd"
+    >
+      <div :class="`${name}__tips`" :style="tipsStyles">
+        <div v-if="state.status === 'loading'">
+          <t-loading :text="loadingText" :class="`${name}__loading-icon`" v-bind="loadingIconProps" />
+        </div>
+        <div v-else>{{ loadingText }}</div>
+      </div>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onUnmounted, reactive, ref, computed, SetupContext, watch, onMounted } from 'vue';
+import PullDownRefreshProps from './props';
+import { useEmitEvent, renderTNode, TNode } from '../shared';
+import config from '../config';
+import TLoading from '../loading';
+
+const { prefix } = config;
+const name = `${prefix}-pull-down-refresh`;
+type PullRefreshStatus = 'normal' | 'loading' | 'loosing' | 'pulling' | 'success';
+function useTouch() {
+  const startY = ref(0);
+  const deltaY = ref(0);
+  const start = (event: TouchEvent) => {
+    startY.value = event.touches[0].clientY;
+    deltaY.value = 0;
+  };
+  const move = (event: TouchEvent) => {
+    const touch = event.touches[0];
+    deltaY.value = touch.clientY - startY.value;
+  };
+  return {
+    startY,
+    deltaY,
+    start,
+    move,
+  };
+}
+const PULL_DISTANCE = 50;
+const ANIMATION_DURATION = 300;
+// 缓动函数
+const easeDistance = (distance: number, pullDistance: number) => {
+  if (distance > pullDistance) {
+    if (distance < pullDistance * 2) {
+      distance = pullDistance + (distance - pullDistance) / 2;
+    } else {
+      distance = pullDistance * 1.5 + (distance - pullDistance * 2) / 4;
+    }
+  }
+  return Math.round(distance);
+};
+function isElement(node: Element) {
+  const ELEMENT_NODE_TYPE = 1;
+  return node.tagName !== 'HTML' && node.tagName !== 'BODY' && node.nodeType === ELEMENT_NODE_TYPE;
+}
+const getScrollParent = (node: Element) => {
+  let res = node;
+  while (res && isElement(res)) {
+    if (/auto|scroll/i.test(window.getComputedStyle(res).overflowY)) {
+      return res;
+    }
+    res = res.parentNode as Element;
+  }
+};
+export default defineComponent({
+  name,
+  components: { TLoading },
+  props: PullDownRefreshProps,
+  emits: ['refresh', 'timeout', 'update:modelValue'],
+  setup(props, context: SetupContext) {
+    const emitEvent = useEmitEvent(props, context.emit);
+    // 动态生成style
+    const trackStyle = computed(() => ({
+      transitionDuration: `${state.duration}ms`,
+      transform: state.distance ? `translate3d(0, ${state.distance}px, 0)` : '',
+    }));
+    const tipsStyles = computed(() => ({
+      height: `${props.loadingBarHeight}px`,
+    }));
+    // 动态生成loadingIcon的props
+    const loadingIconProps = computed(() => ({ ...props.loadingProps }));
+    // 初始化状态和滑动距离，动态调整state
+    const state = reactive({
+      status: 'normal' as PullRefreshStatus,
+      distance: 0,
+      duration: 0,
+    });
+    const setStatus = (distance: number, isLoading?: boolean) => {
+      state.distance = distance;
+      if (isLoading) {
+        state.status = 'loading';
+      } else if (distance === 0) {
+        state.status = 'normal';
+      } else if (distance < PULL_DISTANCE) {
+        state.status = 'pulling';
+      } else {
+        state.status = 'loosing';
+      }
+    };
+    // 根据状态修改loadingText值
+    const loadingTexts = ref(
+      props.loadingTexts?.length ? props.loadingTexts : ['下拉刷新', '松手刷新', '正在刷新', '刷新完成'],
+    );
+    const loadingText = computed(() => {
+      if (state.status === 'pulling') {
+        return loadingTexts.value[0];
+      }
+      if (state.status === 'loosing') {
+        return loadingTexts.value[1];
+      }
+      if (state.status === 'loading') {
+        return loadingTexts.value[2];
+      }
+      if (state.status === 'success') {
+        return loadingTexts.value[3];
+      }
+      return '';
+    });
+    // touch事件逻辑
+    const touch = useTouch();
+    const isTouchable = () => state.status !== 'loading' && state.status !== 'success';
+    // 确保可滚动的父元素此时处于未滚动状态
+    const isReachTop = (e: TouchEvent) => {
+      const scrollParent = getScrollParent(e.target as Element);
+      return !scrollParent || !scrollParent.scrollTop;
+    };
+    const onTouchStart = (e: TouchEvent) => {
+      if (!isReachTop(e)) return;
+      if (isTouchable()) {
+        state.duration = 0;
+        touch.start(e);
+      }
+    };
+    const onTouchMove = (e: TouchEvent) => {
+      if (!isTouchable()) return;
+      if (!isReachTop(e)) return;
+      const { deltaY } = touch;
+      const nextDistance = easeDistance(deltaY.value, PULL_DISTANCE);
+      if (deltaY.value >= 0 && nextDistance <= props.maxBarHeight) {
+        e.preventDefault();
+        setStatus(nextDistance);
+      }
+      touch.move(e);
+    };
+    let timer: any = null;
+    const onTouchEnd = () => {
+      state.duration = ANIMATION_DURATION;
+      if (state.status === 'loosing') {
+        setStatus(props.loadingBarHeight, true);
+        emitEvent('refresh');
+        timer = setTimeout(() => {
+          emitEvent('timeout');
+          state.status = 'normal';
+          setTimeout(() => {
+            setStatus(0, false);
+          }, ANIMATION_DURATION);
+        }, props.refreshTimeout);
+      } else {
+        setStatus(0);
+      }
+    };
+    // 监听value变化，当value变为false，代表下拉加载已结束，可以扭转loading状态了
+    watch(
+      () => props.modelValue,
+      (value) => {
+        if (!value) {
+          state.status = 'success';
+          clearTimeout(timer);
+          setTimeout(() => {
+            setStatus(0, false);
+          }, ANIMATION_DURATION);
+        }
+      },
+    );
+    onUnmounted(() => {
+      clearTimeout(timer);
+    });
+    return {
+      name,
+      state,
+      trackStyle,
+      loadingText,
+      tipsStyles,
+      loadingIconProps,
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+    };
+  },
+});
+</script>
diff --git a/src/pull-down-refresh/style/css.js b/src/pull-down-refresh/style/css.js
new file mode 100644
index 000000000..6a9a4b132
--- /dev/null
+++ b/src/pull-down-refresh/style/css.js
@@ -0,0 +1 @@
+import './index.css';
diff --git a/src/pull-down-refresh/style/index.js b/src/pull-down-refresh/style/index.js
new file mode 100644
index 000000000..0b7e6fcc7
--- /dev/null
+++ b/src/pull-down-refresh/style/index.js
@@ -0,0 +1 @@
+import '../../_common/style/mobile/components/pull-down-refresh/_index.less';
diff --git a/src/pull-down-refresh/type.ts b/src/pull-down-refresh/type.ts
new file mode 100644
index 000000000..c025d386f
--- /dev/null
+++ b/src/pull-down-refresh/type.ts
@@ -0,0 +1,42 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+ import { TdLoadingProps } from '../loading';
+
+ export interface TdPullDownRefreshProps {
+   /**
+    * 加载中下拉高度
+    * @default 200
+    */
+   loadingBarHeight?: number;
+   /**
+    * 加载loading样式
+    */
+   loadingProps?: TdLoadingProps;
+   /**
+    * 提示语，组件内部默认值为 ['下拉刷新', '松手刷新', '正在刷新', '刷新完成']
+    * @default []
+    */
+   loadingTexts?: string[];
+   /**
+    * 最大下拉高度
+    * @default 272
+    */
+   maxBarHeight?: number;
+   /**
+    * 刷新超时时间
+    * @default 3000
+    */
+   refreshTimeout?: number;
+   /**
+    * 结束下拉时触发
+    */
+   onRefresh?: () => void;
+   /**
+    * 刷新超时触发
+    */
+   onTimeout?: () => void;
+ }
\ No newline at end of file