perf: use simple tips-height to perf pull-down-refresh

src/pull-down-refresh/README.en-US.md

@@ -20,6 +20,7 @@ max-bar-height | String / Number | 80 | \- | N
 refresh-timeout | Number | 3000 | \- | N
 scroll-into-view | String | - | `1.1.5` | N
 show-scrollbar | Boolean | true | \- | N
+success-duration | String / Number | 500 | \- | N
 upper-threshold | String / Number | 50 | `1.1.5` | N
 using-custom-navbar | Boolean | false | \- | N
 value | Boolean | false | \- | N

src/pull-down-refresh/README.md

@@ -44,7 +44,7 @@ custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场
 disabled | Boolean | false | 是否禁用下拉刷新 | N
 enable-back-to-top | Boolean | true | `1.1.5`。iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向。自 2.27.3 版本开始，若非显式设置为 false，则在显示尺寸大于屏幕 90% 时自动开启 | N
 enable-passive | Boolean | false | `1.1.5`。开启 passive 特性，能优化一定的滚动性能 | N
-header | Slot | - | `1.2.10`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+header | Slot | - | `1.2.10`。头部。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 loading-bar-height | String / Number | 50 | 加载中下拉高度，如果值为数字则单位是：'px' | N
 loading-props | Object | - | 加载loading样式。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/pull-down-refresh/type.ts) | N
 loading-texts | Array | [] | 提示语，组件内部默认值为 ['下拉刷新', '松手刷新', '正在刷新', '刷新完成']。TS 类型：`string[]` | N
@@ -53,6 +53,7 @@ max-bar-height | String / Number | 80 | 最大下拉高度，如果值为数字
 refresh-timeout | Number | 3000 | 刷新超时时间 | N
 scroll-into-view | String | - | `1.1.5`。值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 | N
 show-scrollbar | Boolean | true | 滚动条显隐控制 (同时开启 enhanced 属性后生效) | N
+success-duration | String / Number | 500 | 刷新成功提示展示时长，单位 'ms' | N
 upper-threshold | String / Number | 50 | `1.1.5`。距顶部/左边多远时，触发 scrolltoupper 事件 | N
 using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
 value | Boolean | false | 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态 | N

src/pull-down-refresh/_example/base/index.js

@@ -22,6 +22,8 @@ Component({
     },
     onScroll(e) {
       const { scrollTop } = e.detail;
+      if (this.data.enable) return;
+
       this.setData({ scrollTop });
     },
   },

src/pull-down-refresh/props.ts

@@ -64,6 +64,11 @@ const props: TdPullDownRefreshProps = {
     type: Boolean,
     value: true,
   },
+  /** 刷新成功提示展示时长，单位 'ms' */
+  successDuration: {
+    type: null,
+    value: 500,
+  },
   /** 距顶部/左边多远时，触发 scrolltoupper 事件 */
   upperThreshold: {
     type: null,

src/pull-down-refresh/pull-down-refresh.ts

@@ -65,6 +65,7 @@ export default class PullDownRefresh extends SuperComponent {
       this.setData({
         _maxBarHeight: unitConvert(maxBarHeight),
         _loadingBarHeight: unitConvert(loadingBarHeight),
+        tipsHeight: unitConvert(loadingBarHeight),
         loadingTexts: isCustomLoadingTexts ? loadingTexts : defaultLoadingTexts,
       });
 
@@ -92,8 +93,10 @@ export default class PullDownRefresh extends SuperComponent {
           this.setData({
             refreshStatus: 3,
           });
+          setTimeout(() => {
+            this.setData({ barHeight: 0 });
+          }, unitConvert(this.properties.successDuration));
         }
-        this.setData({ barHeight: 0 });
       } else {
         this.doRefresh();
       }
@@ -105,16 +108,14 @@ export default class PullDownRefresh extends SuperComponent {
           this.setData({ refreshStatus: -1 });
         }, 240);
       }
-
-      this.setData({ tipsHeight: Math.min(val, this.data._loadingBarHeight) });
     },
 
     maxBarHeight(v) {
       this.setData({ _maxBarHeight: unitConvert(v) });
     },
 
     loadingBarHeight(v) {
-      this.setData({ _loadingBarHeight: unitConvert(v) });
+      this.setData({ tipsHeight: unitConvert(v), _loadingBarHeight: unitConvert(v) });
     },
   };
 

src/pull-down-refresh/pull-down-refresh.wxml

@@ -18,6 +18,7 @@
   bind:touchstart="onTouchStart"
   bind:touchmove="onTouchMove"
   bind:touchend="onTouchEnd"
+  bind:touchcancel="onTouchEnd"
   bind:scroll="onScroll"
   binddragstart="onDragStart"
   binddragging="onDragging"

src/pull-down-refresh/type.ts

@@ -101,6 +101,14 @@ export interface TdPullDownRefreshProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * 刷新成功提示展示时长，单位 'ms'
+   * @default 500
+   */
+  successDuration?: {
+    type: null;
+    value?: string | number;
+  };
   /**
    * 距顶部/左边多远时，触发 scrolltoupper 事件
    * @default 50