Merge pull request #400 from Tencent/fix/pulldownrefresh

fix(pull-down-refresh): enable to use
Tencent · Apr 29, 2022 · 04fd623 · 04fd623
2 parents eb5571c + cb6a55c
commit 04fd623
Show file tree

Hide file tree

Showing 10 changed files with 226 additions and 324 deletions.
diff --git a/example/pages/pull-down-refresh/pull-down-refresh.json b/example/pages/pull-down-refresh/pull-down-refresh.json
@@ -1,6 +1,8 @@
 {
   "navigationBarTitleText": "PullDownRefresh 下拉刷新",
   "navigationBarBackgroundColor": "#fff",
+  "backgroundColor": "#f5f5f5",
+  "disableScroll": true,
   "usingComponents": {
     "t-demo": "../../components/demo-block/index"
   }

diff --git a/example/pages/pull-down-refresh/pull-down-refresh.less b/example/pages/pull-down-refresh/pull-down-refresh.less
@@ -1,16 +1,14 @@
-page {
-  background: #fff;
-  .demo {
-    padding-bottom: 0;
-  }
+.demo {
+  background-color: #fff;
+  padding-bottom: 0;
 }
 
 .pulldown-reflesh__content {
   justify-content: space-between;
-  margin: 0 24rpx;
   flex-wrap: wrap;
-  padding-bottom: 32rpx;
+  padding: 0 24rpx 32rpx;
   position: relative;
+  background-color: #fff;
 
   .text {
     position: absolute;
@@ -19,7 +17,7 @@ page {
     right: 0;
     text-align: center;
     font-size: 32rpx;
-    color: rgba(0, 0, 0, .26);
+    color: rgba(0, 0, 0, 0.26);
     width: 686rpx;
   }
 }
@@ -31,3 +29,12 @@ page {
 .skeleton-text {
   border-radius: 16rpx;
 }
+
+.demo-title {
+  margin: 0;
+  padding: 48rpx 32rpx 0;
+}
+
+t-demo {
+  background-color: #fff;
+}
diff --git a/example/pages/pull-down-refresh/pull-down-refresh.ts b/example/pages/pull-down-refresh/pull-down-refresh.ts
@@ -1,8 +1,8 @@
 Page({
-  pullDownRefresh0: null as WechatMiniprogram.Component.TrivialInstance | null,
-  pullDownRefresh1: null as WechatMiniprogram.Component.TrivialInstance | null,
   data: {
-    error: false,
+    baseRefresh: {
+      value: false,
+    },
     loadingProps0: {
       size: '50rpx',
     },
@@ -21,46 +21,17 @@ Page({
       ],
     ],
   },
-  onLoad() {
-    this.pullDownRefresh0 = this.selectComponent('#pull-down-refresh-0');
-    this.pullDownRefresh1 = this.selectComponent('#pull-down-refresh-1');
-  },
-  // 监听页面滚动事件，并调用pull-down-refresh组件的onPageScroll方法
-  // 组件内根据页面滚动距离来判定页面是否到顶部，页面回到顶部后才能下拉刷新
-  onPageScroll(e) {
-    this.pullDownRefresh0 && this.pullDownRefresh0.onPageScroll(e);
-    this.pullDownRefresh1 && this.pullDownRefresh1.onPageScroll(e);
-  },
-
-  onPullDownRefresh0(e) {
-    // 模拟1秒刷新完成
-    const { callback } = e.detail;
-
-    if (callback) {
-      setTimeout(() => {
-        callback();
-      }, 1000);
-    }
-  },
-
-  timeoutCallback() {
-    console.log('timeout');
-  },
-
-  onPullDownRefresh1(e) {
-    // 模拟2秒刷新完成
-    const { callback } = e.detail;
 
-    if (callback) {
-      setTimeout(() => {
-        callback();
-      }, 2000);
-    }
+  onPullDownRefresh() {
+    setTimeout(() => {
+      this.setData({ 'baseRefresh.value': false });
+    }, 1500);
   },
 
-  toggleError() {
-    this.setData({
-      error: !this.data.error,
+  handleTimeout() {
+    wx.showToast({
+      title: '时间超时',
+      icon: 'none',
     });
   },
 });
diff --git a/example/pages/pull-down-refresh/pull-down-refresh.wxml b/example/pages/pull-down-refresh/pull-down-refresh.wxml
@@ -1,36 +1,35 @@
 <t-pull-down-refresh
-  id="pull-down-refresh-0"
+  value="{{baseRefresh.value}}"
   loadingProps="{{loadingProps0}}"
   t-class-indicator="indicator-blue"
   loadingTexts="{{['下拉刷新', '松手刷新', '正在刷新', '刷新完成']}}"
-  bind:refresh="onPullDownRefresh0"
-  bind:timeout="timeoutCallback"
+  bind:refresh="onPullDownRefresh"
 >
   <view class="demo">
     <view class="demo-title">PullDownRefresh 下拉刷新</view>
     <view class="demo-desc">用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。</view>
-  </view>
 
-  <t-demo title="01 类型" desc="基础选择器">
-    <view class="pulldown-reflesh__content">
-      <t-skeleton
-        rowCol="{{rowCol}}"
-        class="skeleton-item"
-        t-class-text="skeleton-text"
-        loading
-        style="margin-top: 32rpx"
-      ></t-skeleton>
-      <view class="text">下拉刷新大致分为顶部下拉和中间下拉</view>
-    </view>
-  </t-demo>
+    <t-demo title="01 类型" desc="基础选择器">
+      <view class="pulldown-reflesh__content">
+        <t-skeleton
+          rowCol="{{rowCol}}"
+          class="skeleton-item"
+          t-class-text="skeleton-text"
+          loading
+          style="margin-top: 32rpx"
+        ></t-skeleton>
+        <view class="text">拖拽该区域演示 顶部下拉刷新</view>
+      </view>
+    </t-demo>
+  </view>
 </t-pull-down-refresh>
 
 <t-pull-down-refresh
-  id="pull-down-refresh-1"
   loadingProps="{{loadingProps1}}"
   t-class-indicator="indicator-blue"
+  refreshTimeout="2000"
   loadingTexts="{{['继续拉哦', '该松手啦', '努力刷新中', '完成~']}}"
-  bind:refresh="onPullDownRefresh1"
+  bind:timeout="handleTimeout"
 >
   <view class="pulldown-reflesh__content">
     <t-skeleton

diff --git a/src/pull-down-refresh/README.md b/src/pull-down-refresh/README.md
@@ -25,68 +25,40 @@ isComponent: true
 <img src="https://tdesign.gtimg.com/miniprogram/readme/pullDownRefresh-2.png" width="35%" height="35%">
 
 ```html
-<t-pull-down-refresh
-  id="pull-down-refresh"
-  normal-bar-height="{{200}}"
-  max-bar-height="{{272}}"
-  refreshTimeout="{{3000}}"
-  background="#f5f5f5"
-  use-loading-slot
-  loading-size="60rpx"
-  loading-texts="{{['下拉刷新', '松手刷新', '正在刷新', '刷新完成', '']}}"
-  bindrefresh="onPullDownRefresh"
->
-  <t-loading
-    slot="loading"
-    type="circular-ext"
-    color="#306AFF"
-    background-color="#f5f5f5"
-    size="60rpx"
-    paused
-  />
-
-  <view class="text">拖拽该区域下拉刷新</view>
-</t-pull-down-refresh>
+<t-pull-down-refresh value="{{loading}}" bindrefresh="handleRefresh" />
 ```
 
 ```js
 Page({
-  pullDownRefresh: null as WechatMiniprogram.Component.TrivialInstance | null,
-  data: {},
-  onLoad() {
-    this.pullDownRefresh = this.selectComponent('#pull-down-refresh');
-  },
-  // 监听页面滚动事件，并调用pull-down-refresh组件的onPageScroll方法
-  // 组件内根据页面滚动距离来判定页面是否到顶部，页面回到顶部后才能下拉刷新
-  onPageScroll(e) {
-    this.pullDownRefresh && this.pullDownRefresh.onPageScroll(e);
+  data: {
+    loading: false
   },
-  onPullDownRefresh(e: WechatMiniprogram.Event<{ callback: () => void }>) {
-    // 模拟1秒刷新完成
-    const { callback } = e.detail;
+  handleRefresh() {
+    // 模拟 1s 加载
     setTimeout(() => {
-      callback && callback();
-    }, 1000);
+      this.setData({ loading: false })
+    }, 1000)
   },
 });
 ```
 
 ## API
-
 ### PullDownRefresh Props
 
-| 名称               | 类型   | 默认值 | 说明                                                                                                                                                         | 必传 |
-| ------------------ | ------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---- |
-| external-classes   | Array  | -      | 加载 loading 样式。`['t-class', 't-class-loading','t-class-text', 't-class-indicator']`                                                                      | N    |
-| loading-bar-height | Number | 200    | 加载中下拉高度                                                                                                                                               | N    |
-| loading-props      | Object | -      | 加载 loading 样式。TS 类型：`TdLoadingProps`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/pull-down-refresh/type.ts) | N    |
-| loading-texts      | Array  | []     | 提示语，组件内部默认值为 ['下拉刷新', '松手刷新', '正在刷新', '刷新完成']。TS 类型：`string[]`                                                               | N    |
-| max-bar-height     | Number | 272    | 最大下拉高度                                                                                                                                                 | N    |
-| refresh-timeout    | Number | 3000   | 刷新超时时间                                                                                                                                                 | N    |
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+external-classes | Array | - | 加载loading样式。`['t-class', 't-class-loading','t-class-text', 't-class-indicator']` | 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
+max-bar-height | String / Number | 80 | 最大下拉高度，如果值为数字则单位是：'px' | N
+refresh-timeout | Number | 3000 | 刷新超时时间 | N
+value | Boolean | false | 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态 | N
 
 ### PullDownRefresh Events
 
-| 名称    | 参数 | 描述           |
-| ------- | ---- | -------------- |
-| refresh | -    | 结束下拉时触发 |
-| timeout | -    | 刷新超时触发   |
+名称 | 参数 | 描述
+-- | -- | --
+change | `(value: boolean)` | 下拉或收起时触发，用户手势往下滑动触发下拉状态，手势松开触发收起状态
+refresh | - | 结束下拉时触发
+timeout | - | 刷新超时触发
diff --git a/src/pull-down-refresh/props.ts b/src/pull-down-refresh/props.ts
@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-11-24 10:58:05
  * */
 
 import { TdPullDownRefreshProps } from './type';
@@ -11,10 +10,11 @@ const props: TdPullDownRefreshProps = {
   externalClasses: {
     type: Array,
   },
-  /** 加载中下拉高度 */
+  /** 加载中下拉高度，如果值为数字则单位是：'px' */
   loadingBarHeight: {
-    type: Number,
-    value: 200,
+    type: String,
+    optionalTypes: [Number],
+    value: 50,
   },
   /** 加载loading样式 */
   loadingProps: {
@@ -25,16 +25,27 @@ const props: TdPullDownRefreshProps = {
     type: Array,
     value: [],
   },
-  /** 最大下拉高度 */
+  /** 最大下拉高度，如果值为数字则单位是：'px' */
   maxBarHeight: {
-    type: Number,
-    value: 272,
+    type: String,
+    optionalTypes: [Number],
+    value: 80,
   },
   /** 刷新超时时间 */
   refreshTimeout: {
     type: Number,
     value: 3000,
   },
+  /** 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态 */
+  value: {
+    type: Boolean,
+    value: null,
+  },
+  /** 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态，非受控属性 */
+  defaultValue: {
+    type: Boolean,
+    value: false,
+  },
 };
 
 export default props;
diff --git a/src/pull-down-refresh/pull-down-refresh.less b/src/pull-down-refresh/pull-down-refresh.less
@@ -1,49 +1,28 @@
 @import '../common/style/index.less';
 
 .@{prefix}-pull-down-refresh {
-  &__bar {
-    overflow: hidden;
-    position: relative;
-    background: #f6f6f6;
-    color: #bbb;
-    font-size: 24rpx;
-
-    &--refreshing {
-      transition: height .5s;
+  overflow: hidden;
 
-      .@{prefix}-pull-down-refresh__loading {
-        animation: rotateLoading .5s linear infinite;
-      }
-    }
-
-    &--success {
-      .refresh-bar__loading {
-        display: none;
-      }
-    }
-
-    &--finishing {
-      transition: height 1s;
+  &__track {
+    position: relative;
 
-      .@{prefix}-pull-down-refresh__loading {
-        visibility: hidden;
-      }
+    &--loosing {
+      transition: transform ease 0.24s;
     }
   }
 
-  &__content {
-    margin-top: 55rpx;
+  &__tips {
+    position: absolute;
+    color: #bbb;
+    font-size: 24rpx;
+    top: 0;
+    width: 100%;
+    transform: translateY(-100%);
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
-  }
-
-  &__loading {
-    position: relative;
-    box-sizing: border-box;
-    width: auto;
-    height: auto;
+    overflow: hidden;
   }
 
   &__text {
@@ -54,13 +33,3 @@
     position: relative;
   }
 }
-
-@keyframes rotateLoading {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}