diff --git a/src/pull-down-refresh/__test__/__snapshots__/demo.test.jsx.snap b/src/pull-down-refresh/__test__/__snapshots__/demo.test.jsx.snap
index 52a38c910..9fe128284 100644
--- a/src/pull-down-refresh/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/pull-down-refresh/__test__/__snapshots__/demo.test.jsx.snap
@@ -2,38 +2,28 @@
 
 exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
 <div
-  class="tdesign-mobile-demo"
+  class="t-pull-down-refresh"
 >
   <div
-    class="tdesign-mobile-demo-block"
+    class="t-pull-down-refresh__track"
+    style="transition-duration: 300ms; transform: translate3d(0, 0px, 0);"
   >
-    <!--v-if-->
-    <!--v-if-->
-    
     <div
-      class="t-pull-down-refresh"
+      class="t-pull-down-refresh__max"
+      style="height: 80px;"
     >
       <div
-        class="t-pull-down-refresh__track"
-        style="transition-duration: 300ms; transform: translate3d(0, 0px, 0);"
+        class="t-pull-down-refresh__loading"
+        style="height: 50px;"
       >
-        <div
-          class="t-pull-down-refresh__max"
-          style="height: 80px;"
-        >
-          <div
-            class="t-pull-down-refresh__loading"
-            style="height: 50px;"
-          >
-            <div />
-          </div>
-        </div>
-        
-        下拉刷新
-        
+        <div />
       </div>
     </div>
     
+    
+     下拉刷新 
+    
+    
   </div>
 </div>
 `;
@@ -80,10 +70,8 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
 <div
   class="tdesign-mobile-demo"
   data-v-43d0a031=""
+  style="background-color: rgb(255, 255, 255); height: 100vh;"
 >
-  <!-- &lt;h1 class="title"&gt;PullDownRefresh 下拉刷新&lt;/h1&gt;
-    &lt;p class="summary"&gt;用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。&lt;/p&gt;
-    &lt;p class="blank"&gt;&lt;/p&gt; -->
   <div
     class="tdesign-mobile-demo-block"
     data-v-43d0a031=""
@@ -92,187 +80,137 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
     <!--v-if-->
     
     <div
-      class="t-tabs t-is-top t-size-m"
+      class="t-pull-down-refresh"
       data-v-43d0a031=""
     >
       <div
-        class="t-sticky"
-        style="height: 0px;"
+        class="t-pull-down-refresh__track"
+        style="transition-duration: 300ms; transform: translate3d(0, 0px, 0);"
       >
         <div
-          class="t-sticky__content"
-          style="z-index: 99;"
+          class="t-pull-down-refresh__max"
+          style="height: 80px;"
         >
-          
           <div
-            class="t-tabs__nav"
+            class="t-pull-down-refresh__loading"
+            style="height: 50px;"
           >
-            <div
-              class="t-tabs__nav-container"
-            >
-              <div
-                class="t-tabs__nav-wrap"
-              >
-                
-                <div
-                  class="t-tabs__nav-item t-is-active"
-                >
-                  基础用法
-                </div>
-                <div
-                  class="t-tabs__nav-item"
-                >
-                  自定义文案
-                </div>
-                <div
-                  class="t-tabs__nav-item"
-                >
-                  超时事件
-                </div>
-                
-                <div
-                  class="t-tabs__nav-line"
-                  style=""
-                />
-              </div>
-            </div>
+            <div />
           </div>
-          
         </div>
-      </div>
-      <div
-        class="t-tabs__content"
-      >
         
+        
+        <h1
+          class="title"
+          data-v-43d0a031=""
+        >
+          PullDownRefresh 下拉刷新
+        </h1>
+        <p
+          class="summary"
+          data-v-43d0a031=""
+        >
+          用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。
+        </p>
         <div
-          class="t-tab-panel t-tabs__panel"
+          class="tdesign-mobile-block"
+          data-v-43d0a031=""
+        >
+          拖拽该区域演示 顶部下拉刷新
+        </div>
+        <div
+          class="group"
           data-v-43d0a031=""
-          value="first"
         >
           
           <div
-            class="refresh-content"
+            class="t-skeleton item"
             data-v-43d0a031=""
           >
+            
             <div
-              class="t-pull-down-refresh demo-pull-down-refresh"
-              data-v-43d0a031=""
+              class="t-skeleton__content"
             >
+              
               <div
-                class="t-pull-down-refresh__track"
-                style="transition-duration: 300ms; transform: translate3d(0, 0px, 0);"
+                class="t-skeleton__row"
               >
-                <div
-                  class="t-pull-down-refresh__max"
-                  style="height: 80px;"
-                >
-                  <div
-                    class="t-pull-down-refresh__loading"
-                    style="height: 50px;"
-                  >
-                    <div />
-                  </div>
-                </div>
                 
                 <div
-                  class="content-text"
-                  data-v-43d0a031=""
-                >
-                  已下拉0次
-                </div>
+                  class="t-skeleton__col t-skeleton--type-text"
+                />
                 
               </div>
-            </div>
-          </div>
-          
-        </div>
-        <div
-          class="t-tab-panel t-tabs__panel"
-          data-v-43d0a031=""
-          style="display: none;"
-          value="second"
-        >
-          
-          <div
-            class="refresh-content"
-            data-v-43d0a031=""
-          >
-            <div
-              class="t-pull-down-refresh demo-pull-down-refresh"
-              data-v-43d0a031=""
-            >
               <div
-                class="t-pull-down-refresh__track"
-                style="transition-duration: 300ms; transform: translate3d(0, 0px, 0);"
+                class="t-skeleton__row"
               >
+                
                 <div
-                  class="t-pull-down-refresh__max"
-                  style="height: 80px;"
-                >
-                  <div
-                    class="t-pull-down-refresh__loading"
-                    style="height: 50px;"
-                  >
-                    <div />
-                  </div>
-                </div>
+                  class="t-skeleton__col t-skeleton--type-text"
+                  style="width: 100px;"
+                />
+                
+              </div>
+              <div
+                class="t-skeleton__row"
+              >
                 
                 <div
-                  class="content-text"
-                  data-v-43d0a031=""
-                >
-                  已下拉0次
-                </div>
+                  class="t-skeleton__col t-skeleton--type-text"
+                  style="width: 165.5px; height: 165.5px; border-radius: 12px;"
+                />
                 
               </div>
+              
             </div>
+            
           </div>
-          
-        </div>
-        <div
-          class="t-tab-panel t-tabs__panel"
-          data-v-43d0a031=""
-          style="display: none;"
-          value="third"
-        >
-          
           <div
-            class="refresh-content"
+            class="t-skeleton item"
             data-v-43d0a031=""
           >
+            
             <div
-              class="t-pull-down-refresh demo-pull-down-refresh"
-              data-v-43d0a031=""
+              class="t-skeleton__content"
             >
+              
               <div
-                class="t-pull-down-refresh__track"
-                style="transition-duration: 300ms; transform: translate3d(0, 0px, 0);"
+                class="t-skeleton__row"
               >
+                
                 <div
-                  class="t-pull-down-refresh__max"
-                  style="height: 80px;"
-                >
-                  <div
-                    class="t-pull-down-refresh__loading"
-                    style="height: 50px;"
-                  >
-                    <div />
-                  </div>
-                </div>
+                  class="t-skeleton__col t-skeleton--type-text"
+                />
+                
+              </div>
+              <div
+                class="t-skeleton__row"
+              >
+                
+                <div
+                  class="t-skeleton__col t-skeleton--type-text"
+                  style="width: 100px;"
+                />
+                
+              </div>
+              <div
+                class="t-skeleton__row"
+              >
                 
                 <div
-                  class="content-text"
-                  data-v-43d0a031=""
-                >
-                  已下拉0次
-                </div>
+                  class="t-skeleton__col t-skeleton--type-text"
+                  style="width: 165.5px; height: 165.5px; border-radius: 12px;"
+                />
                 
               </div>
+              
             </div>
+            
           </div>
           
         </div>
         
+        
       </div>
     </div>
     
diff --git a/src/pull-down-refresh/demos/base.vue b/src/pull-down-refresh/demos/base.vue
index 98aafe4b4..8d3fdcdbf 100644
--- a/src/pull-down-refresh/demos/base.vue
+++ b/src/pull-down-refresh/demos/base.vue
@@ -1,33 +1,23 @@
 <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>
+  <t-pull-down-refresh
+    v-model="refreshing"
+    :loading-texts="['下拉刷新', '松开刷新', '正在刷新', '刷新完成']"
+    @refresh="handleRefresh"
+  >
+    <slot> 下拉刷新 </slot>
+  </t-pull-down-refresh>
 </template>
 
-<script lang="ts">
-import { ref, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { ref } 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: {},
-});
+const refreshing = ref(false);
+const handleRefresh = (value: any) => {
+  refreshing.value = true;
+  setTimeout(() => {
+    refreshing.value = false;
+  }, 1000);
+};
 </script>
 
 <style lang="less" scoped></style>
diff --git a/src/pull-down-refresh/demos/mobile.vue b/src/pull-down-refresh/demos/mobile.vue
index 7eb7d8ed3..e4075a73e 100644
--- a/src/pull-down-refresh/demos/mobile.vue
+++ b/src/pull-down-refresh/demos/mobile.vue
@@ -1,130 +1,54 @@
 <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">
-        <t-tab-panel value="first" label="基础用法">
-          <div class="refresh-content">
-            <t-pull-down-refresh
-              :value="refreshing1"
-              class="demo-pull-down-refresh"
-              @refresh="handleRefresh(1)"
-              @change="handleChangeRefreshing1"
-              ><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
-              :value="refreshing2"
-              :on-change="handleChangeRefreshing2"
-              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="2000"
-              @refresh="handleRefresh(3)"
-              @timeout="handleTimeout"
-              ><div class="content-text">已下拉{{ refreshCount3 }}次</div></t-pull-down-refresh
-            >
-          </div>
-        </t-tab-panel>
-      </t-tabs>
+  <div class="tdesign-mobile-demo" :style="{ 'background-color': '#fff', height: '100vh' }">
+    <tdesign-demo-block>
+      <BaseDemo>
+        <h1 class="title">PullDownRefresh 下拉刷新</h1>
+        <p class="summary">用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。</p>
+        <div class="tdesign-mobile-block">拖拽该区域演示 顶部下拉刷新</div>
+        <div class="group">
+          <t-skeleton v-for="i in 2" :key="i" :row-col="rowCols" class="item" />
+        </div>
+      </BaseDemo>
     </tdesign-demo-block>
   </div>
 </template>
 
-<script lang="ts">
-import { ref, defineComponent } from 'vue';
-import { Toast } from '@/components';
+<script lang="ts" setup>
+import BaseDemo from './base.vue';
 
-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) => {
-      switch (value) {
-        case 1:
-          setTimeout(() => {
-            handleChangeRefreshing1(false);
-            refreshCount1.value = 1 + refreshCount1.value;
-          }, 1000);
-          break;
-        case 2:
-          setTimeout(() => {
-            handleChangeRefreshing2(false);
-            refreshCount2.value = 1 + refreshCount2.value;
-          }, 1000);
-          break;
-        default:
-          setTimeout(() => {
-            refreshing3.value = false;
-            refreshCount3.value = 1 + refreshCount3.value;
-          }, 3000);
-      }
-    };
-    const handleTimeout = () => {
-      Toast('已超时');
-      refreshCount3.value = 1 + refreshCount3.value;
-    };
-    const handleChangeRefreshing1 = (value: boolean) => {
-      refreshing1.value = value;
-    };
-    const handleChangeRefreshing2 = (value: boolean) => {
-      refreshing2.value = value;
-    };
-    const handleChangeRefreshing3 = (value: boolean) => {
-      refreshing3.value = value;
-    };
-    return {
-      refreshing1,
-      refreshing2,
-      refreshing3,
-      refreshCount1,
-      refreshCount2,
-      refreshCount3,
-      handleRefresh,
-      handleTimeout,
-      handleChangeRefreshing1,
-      handleChangeRefreshing2,
-      handleChangeRefreshing3,
-    };
+const rowCols = [
+  1,
+  {
+    width: '100px',
   },
-  data() {
-    return {};
+  {
+    width: '165.5px',
+    height: '165.5px',
+    borderRadius: '12px',
   },
-  methods: {},
-});
+];
 </script>
 
 <style lang="less" scoped>
-.blank {
-  height: 30px;
+.tdesign-mobile-block {
+  box-sizing: border-box;
+  background-color: rgba(243, 243, 243, 1);
+  border-radius: 12px;
+  height: 171px;
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.26);
+  line-height: 171px;
+  text-align: center;
+  margin: 16px;
 }
-.demo-pull-down-refresh {
-  height: calc(100vh - 95px);
-}
-.refresh-content {
-  padding: 0 16px;
-  .content-text {
-    padding: 20px 0;
+.group {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  padding: 0 16px 140px 16px;
+  .item {
+    width: 47%;
+    margin-bottom: 16px;
   }
 }
 </style>