feat: pullrefresh 完成

src/packages/pullrefresh/demo.vue

@@ -5,35 +5,18 @@
       <div class="vertical">
         <nut-pullrefresh
           @refresh="refresh"
+          @down-refresh="downRefresh"
           :useWindow="false"
           containerId="pull"
         >
           <div class="content" id="pull">
             <div class="main">
-              <div class="text-data">我是测试数据1</div>
-              <div class="text-data">我是测试数据2</div>
-              <div class="text-data">我是测试数据3</div>
-              <div class="text-data">我是测试数据4</div>
-              <div class="text-data">我是测试数据5</div>
-              <div class="text-data">我是测试数据6</div>
-              <div class="text-data">我是测试数据7</div>
-              <div class="text-data">我是测试数据8</div>
-              <div class="text-data">我是测试数据9</div>
-              <div class="text-data">我是测试数据10</div>
-              <div class="text-data">我是测试数据11</div>
-              <div class="text-data">我是测试数据12</div>
-              <div class="text-data">我是测试数据13</div>
-              <div class="text-data">我是测试数据14</div>
-              <div class="text-data">我是测试数据15</div>
-              <div class="text-data">我是测试数据16</div>
-              <div class="text-data">我是测试数据17</div>
-              <div class="text-data">我是测试数据18</div>
-              <div class="text-data">我是测试数据19</div>
-              <div class="text-data">我是测试数据20</div>
-              <div class="text-data">我是测试数据21</div>
-              <div class="text-data">我是测试数据22</div>
-              <div class="text-data">我是测试数据23</div>
-              <div class="text-data">我是测试数据24</div>
+              <div
+                class="text-data"
+                v-for="item in [1, 2, 3, 4, 5, 6, 7, 8, 9]"
+                :key="item"
+                >我是测试数据 {{ item }}</div
+              >
             </div>
           </div>
         </nut-pullrefresh>
@@ -45,21 +28,19 @@
       <div class="horizontal">
         <nut-pullrefresh
           @refresh="refresh"
+          @down-refresh="downRefresh"
           :useWindow="false"
           containerId="pullH"
           direction="horizontal"
         >
           <div class="contentH" id="pullH">
             <div class="mainH">
-              <div class="text-data">我是测试数据1</div>
-              <div class="text-data">我是测试数据2</div>
-              <div class="text-data">我是测试数据3</div>
-              <div class="text-data">我是测试数据4</div>
-              <div class="text-data">我是测试数据5</div>
-              <div class="text-data">我是测试数据6</div>
-              <div class="text-data">我是测试数据7</div>
-              <div class="text-data">我是测试数据8</div>
-              <div class="text-data">我是测试数据9</div>
+              <div
+                class="text-data"
+                v-for="item in [1, 2, 3, 4, 5, 6, 7, 8, 9]"
+                :key="item"
+                >我是测试数据 {{ item }}</div
+              >
             </div>
           </div>
         </nut-pullrefresh>
@@ -75,11 +56,19 @@ export default createDemo({
   props: {},
   setup() {
     const refresh = done => {
+      console.log('上拉加载');
       setTimeout(() => {
         done();
       }, 1000);
     };
-    return { refresh };
+
+    const downRefresh = done => {
+      console.log('下拉刷新');
+      setTimeout(() => {
+        done();
+      }, 1000);
+    };
+    return { refresh, downRefresh };
   }
 });
 </script>
@@ -92,9 +81,6 @@ export default createDemo({
 .content {
   height: 100%;
   overflow: auto;
-  .main {
-    padding: 10px 0;
-  }
 }
 
 .horizontal {

src/packages/pullrefresh/doc.md

@@ -1,34 +1,122 @@
 #  pullrefresh组件
 
-    ### 介绍
-    
-    基于 xxxxxxx
-    
-    ### 安装
-    
-    
-    
-    ## 代码演示
-    
-    ### 基础用法1
-    
+### 介绍
 
+纵向可支持下拉刷新和上拉加载，横向可支持左滑更新、右滑加载更多
+
+### 安装
     
-    ## API
-    
-    ### Props
-    
-    | 参数         | 说明                             | 类型   | 默认值           |
-    |--------------|----------------------------------|--------|------------------|
-    | name         | 图标名称或图片链接               | String | -                |
-    | color        | 图标颜色                         | String | -                |
-    | size         | 图标大小，如 '20px' '2em' '2rem' | String | -                |
-    | class-prefix | 类名前缀，用于使用自定义图标     | String | 'nutui-iconfont' |
-    | tag          | HTML 标签                        | String | 'i'              |
-    
-    ### Events
+```javascript
+import { createApp } from 'vue';
+import { PullRefresh } from '@nutui/nutui';
+
+const app = createApp();
+app.use(PullRefresh);
+```
     
-    | 事件名 | 说明           | 回调参数     |
-    |--------|----------------|--------------|
-    | click  | 点击图标时触发 | event: Event |
-    
+## 代码演示
+
+### 纵向
+
+```html
+<div class="vertical">
+    <nut-pullrefresh
+        @refresh="refresh"
+        @down-refresh="downRefresh"
+        :useWindow="false"
+        containerId="pull"
+    >
+        <div class="content" id="pull">
+            <div class="main">
+                <div
+                    class="text-data"
+                    v-for="item in [1, 2, 3, 4, 5, 6, 7, 8, 9]"
+                    :key="item"
+                    >我是测试数据 {{ item }}</div>
+            </div>
+        </div>
+    </nut-pullrefresh>
+</div>
+```
+```javascript
+setup() {
+    const refresh = done => {
+      console.log('上拉加载')
+      setTimeout(() => {
+        done();
+      }, 1000);
+    };
+
+    const downRefresh = done => {
+      console.log('下拉刷新')
+      setTimeout(() => {
+        done();
+      }, 1000);
+    }
+    return { refresh, downRefresh };
+}
+```
+
+### 横向
+
+```html
+<div class="horizontal">
+    <nut-pullrefresh
+        @refresh="refresh"
+        @down-refresh="downRefresh"
+        :useWindow="false"
+        containerId="pullH"
+        direction="horizontal"
+    >
+        <div class="contentH" id="pullH">
+        <div class="mainH">
+            <div
+            class="text-data"
+            v-for="item in [1, 2, 3, 4, 5, 6, 7, 8, 9]"
+            :key="item"
+            >我是测试数据 {{ item }}</div
+            >
+        </div>
+        </div>
+    </nut-pullrefresh>
+</div>
+```
+```javascript
+setup() {
+    const refresh = done => {
+      console.log('上拉加载')
+      setTimeout(() => {
+        done();
+      }, 1000);
+    };
+
+    const downRefresh = done => {
+      console.log('下拉刷新')
+      setTimeout(() => {
+        done();
+      }, 1000);
+    }
+    return { refresh, downRefresh };
+}
+```
+
+## API
+
+### Props
+
+| 参数         | 说明                             | 类型   | 默认值           |
+|--------------|----------------------------------|--------|------------------|
+| useWindow | 将滚动侦听器添加到 window 否则侦听组件的父节点     | Boolean | true |
+| containerId          | 在 useWindow 属性为 false 的时候，自定义设置节点ID    | String | ''            |
+| disabled          | 组件是否激活                        | Boolean | true            |
+| direction        | 滚动的方向，'vertical' 纵向、'horizontal' 横向   | String | 'vertical'                |
+| pullingText        | '下拉'文案   | Object | {top: '下拉刷新', bottom: '上拉加载',left: '左滑刷新', right: '右滑加载'}              |
+| loosingText        | '释放'文案   | Object | {top: ’松手释放刷新', bottom: '松手释放刷新',left: '释放刷新', right: '加载更多'}              |
+| loadingText        | '加载中'文案   | Object | {top: '加载中...', bottom: '加载中...',left: '加载中...', right: '加载中...'}              |
+
+### Events
+
+| 事件名 | 说明           | 回调参数     |
+|--------|----------------|--------------|
+| refresh  | 纵向-上拉加载、横向-右滑加载更多时触发 | done() 函数，在数据更新完成以后，需要调用 done() 函数将组件状态初始化 |
+| downRefresh  | 纵向-下拉刷新、横向-左滑刷新时触发 | done() 函数，在数据更新完成以后，需要调用 done() 函数将组件状态初始化 |  

src/packages/pullrefresh/index.css

@@ -1,67 +0,0 @@
-view {
-  display: block;
-}
-
-.nut-pullrefresh {
-  position: relative;
-  height: 100%;
-}
-
-.nut-pullrefresh .pullrefresh-top {
-  position: absolute;
-  left: 0;
-  overflow: hidden;
-  color: #969799;
-  font-size: 14px;
-  line-height: 50px;
-  text-align: center;
-}
-
-.nut-pullrefresh .pullrefresh-top.pullrefresh-top-v {
-  width: 100%;
-  height: 50px;
-  -webkit-transform: translateY(-100%);
-  transform: translateY(-100%);
-}
-
-.nut-pullrefresh .pullrefresh-top.pullrefresh-top-h {
-  width: 50px;
-  height: 100%;
-  -webkit-transform: translateX(-100%);
-  transform: translateX(-100%);
-  writing-mode: tb-rl;
-}
-
-.nut-pullrefresh .pullrefresh-content {
-  height: 100%;
-  overflow: auto;
-  background: #fff;
-}
-
-.nut-pullrefresh .pullrefresh-bottom {
-  position: absolute;
-  overflow: hidden;
-  color: #969799;
-  font-size: 14px;
-  line-height: 50px;
-  text-align: center;
-}
-
-.nut-pullrefresh .pullrefresh-bottom.pullrefresh-bottom-v {
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 0px;
-  -webkit-transform: translateY(100%);
-  transform: translateY(100%);
-}
-
-.nut-pullrefresh .pullrefresh-bottom.pullrefresh-bottom-h {
-  top: 0;
-  right: 0;
-  width: 50px;
-  height: 100%;
-  -webkit-transform: translateX(100%);
-  transform: translateX(100%);
-  writing-mode: tb-rl;
-}

src/packages/pullrefresh/index.scss

@@ -13,20 +13,22 @@ view {
     overflow: hidden;
     color: #969799;
     font-size: 14px;
-    line-height: 50px;
+
     text-align: center;
     &.pullrefresh-top-v {
+      line-height: 50px;
       width: 100%;
       height: 50px;
       -webkit-transform: translateY(-100%);
       transform: translateY(-100%);
     }
     &.pullrefresh-top-h {
+      display: flex;
+      align-items: center;
       width: 50px;
       height: 100%;
       -webkit-transform: translateX(-100%);
       transform: translateX(-100%);
-      writing-mode: tb-rl;
     }
   }
 
@@ -42,7 +44,7 @@ view {
     overflow: hidden;
     color: #969799;
     font-size: 14px;
-    line-height: 50px;
+
     text-align: center;
 
     &.pullrefresh-bottom-v {
@@ -50,17 +52,19 @@ view {
       bottom: 0;
       width: 100%;
       height: 0px;
+      line-height: 50px;
       -webkit-transform: translateY(100%);
       transform: translateY(100%);
     }
     &.pullrefresh-bottom-h {
+      display: flex;
+      align-items: center;
       top: 0;
       right: 0;
       width: 50px;
       height: 100%;
       -webkit-transform: translateX(100%);
       transform: translateX(100%);
-      writing-mode: tb-rl;
     }
   }
 }

src/packages/pullrefresh/index.vue

@@ -12,21 +12,8 @@
       :class="
         direction == 'horizontal' ? 'pullrefresh-top-h' : 'pullrefresh-top-v'
       "
+      >{{ refreshTopTem }}</view
     >
-      {{ refreshTem }}
-      <!-- <template
-        v-if="status == 'loading' && (reachTop || reachLeft) && distance > 0"
-        >{{ loadingText.top }}</template
-      >
-      <template
-        v-if="status == 'pulling' && (reachTop || reachLeft) && distance > 0"
-        >{{ pullingText.top }}</template
-      >
-      <template
-        v-if="status == 'loosing' && (reachTop || reachLeft) && distance > 0"
-        >{{ loosingText.top }}</template
-      > -->
-    </view>
     <view class="pullrefresh-content" ref="pull">
       <slot></slot>
     </view>
@@ -39,26 +26,8 @@
           : 'pullrefresh-bottom-v'
       "
       :style="getBottomStyle"
+      >{{ refreshBottomTem }}</view
     >
-      <template
-        v-if="
-          status == 'loading' && (reachBottom || reachRight) && distance < 0
-        "
-        >{{ loadingText.bottom }}</template
-      >
-      <template
-        v-if="
-          status == 'pulling' && (reachBottom || reachRight) && distance < 0
-        "
-        >{{ pullingText.bottom }}</template
-      >
-      <template
-        v-if="
-          status == 'loosing' && (reachBottom || reachRight) && distance < 0
-        "
-        >{{ loosingText.bottom }}</template
-      >
-    </view>
   </view>
 </template>
 
@@ -103,8 +72,8 @@ export default create({
       default: {
         top: '松手释放刷新',
         bottom: '松手释放刷新',
-        left: '松手释放刷新',
-        right: '松手释放刷新'
+        left: '释放刷新',
+        right: '加载更多'
       }
     },
     loadingText: {
@@ -118,7 +87,7 @@ export default create({
     }
   },
   components: {},
-  emits: ['refresh'],
+  emits: ['refresh', 'downRefresh'], // refresh 上拉加载、右滑加载更多  downRefresh 下拉刷新、左滑刷新
 
   setup(props, { emit }) {
     console.log('componentName', componentName);
@@ -203,16 +172,17 @@ export default create({
       return style;
     });
 
-    const refreshTem = computed(() => {
+    /** 刷新 顶部或左侧 */
+    const refreshTopTem = computed(() => {
       const { status, distance } = state;
 
-      /** 刷新 顶部或左侧 */
+      const tag = direction.value == 'vertical' ? 'top' : 'left';
       if (
         status == 'loading' &&
         (reachTop.value || reachLeft.value) &&
         distance > 0
       ) {
-        return props.loadingText.top;
+        return props.loadingText[tag];
       }
 
       if (
@@ -220,7 +190,7 @@ export default create({
         (reachTop.value || reachLeft.value) &&
         distance > 0
       ) {
-        return props.pullingText.top;
+        return props.pullingText[tag];
       }
 
       if (
@@ -228,10 +198,39 @@ export default create({
         (reachTop.value || reachLeft.value) &&
         distance > 0
       ) {
-        return props.loosingText.top;
+        return props.loosingText[tag];
+      }
+
+      return '';
+    });
+    /** 刷新 底部或右侧 */
+    const refreshBottomTem = computed(() => {
+      const { status, distance } = state;
+
+      const tag = direction.value == 'vertical' ? 'bottom' : 'right';
+      if (
+        status == 'loading' &&
+        (reachBottom.value || reachRight.value) &&
+        distance < 0
+      ) {
+        return props.loadingText[tag];
       }
 
-      /** 刷新 底部或右侧 */
+      if (
+        status == 'pulling' &&
+        (reachBottom.value || reachRight.value) &&
+        distance < 0
+      ) {
+        return props.pullingText[tag];
+      }
+
+      if (
+        status == 'loosing' &&
+        (reachBottom.value || reachRight.value) &&
+        distance < 0
+      ) {
+        return props.loosingText[tag];
+      }
 
       return '';
     });
@@ -321,6 +320,8 @@ export default create({
             touch.start(event);
           }
         }
+      } else {
+        preventDefault(event);
       }
     };
 
@@ -348,6 +349,8 @@ export default create({
           preventDefault(event);
           setStatus(ease(deltaX.value));
         }
+      } else {
+        preventDefault(event);
       }
     };
     const touchEnd = () => {
@@ -362,6 +365,7 @@ export default create({
             deltaY.value > 0
           ) {
             dis = 50;
+            emit('downRefresh', refreshDone);
           }
           if (
             direction.value == 'vertical' &&
@@ -369,6 +373,7 @@ export default create({
             deltaY.value < 0
           ) {
             dis = -50;
+            emit('refresh', refreshDone);
           }
           if (
             direction.value == 'horizontal' &&
@@ -376,6 +381,7 @@ export default create({
             deltaX.value > 0
           ) {
             dis = 50;
+            emit('downRefresh', refreshDone);
           }
           if (
             direction.value == 'horizontal' &&
@@ -383,9 +389,9 @@ export default create({
             deltaX.value < 0
           ) {
             dis = -50;
+            emit('refresh', refreshDone);
           }
           setStatus(dis, true);
-          emit('refresh', refreshDone);
         } else {
           setStatus(0);
         }
@@ -402,7 +408,8 @@ export default create({
       reachRight,
       reachLeft,
       getBottomStyle,
-      refreshTem,
+      refreshTopTem,
+      refreshBottomTem,
       ...toRefs(state)
     };
   }