refactor: infiniteloading

JihanLeo · Mar 17, 2021 · cc74341 · cc74341
1 parent e79a86b
commit cc74341
Show file tree

Hide file tree

Showing 6 changed files with 164 additions and 195 deletions.
diff --git a/src/config.json b/src/config.json
@@ -160,7 +160,7 @@
           "version": "3.0.0",
           "name": "Notify",
           "type": "component",
-          "cName": "methods",
+          "cName": "消息通知",
           "desc": "在页面顶部展示消息提示，支持函数调用和组件调用两种方式",
           "sort": 4,
           "show": true,

diff --git a/src/packages/infiniteloading/demo.vue b/src/packages/infiniteloading/demo.vue
@@ -4,10 +4,10 @@
     <nut-cell>
       <ul class="infiniteUl" id="scroll">
         <nut-infiniteloading
-          containerId="scroll"
-          :useWindow="false"
-          :hasMore="hasMore"
-          @loadMore="loadMore"
+          container-id="scroll"
+          :use-window="false"
+          :has-more="hasMore"
+          @load-more="loadMore"
         >
           <li
             class="infiniteLi"
@@ -23,11 +23,12 @@
     <nut-cell>
       <ul class="infiniteUl" id="refreshScroll">
         <nut-infiniteloading
-          containerId="refreshScroll"
-          :useWindow="false"
-          :isOpenRefresh="true"
-          :hasMore="refreshHasMore"
-          @loadMore="refreshLoadMore"
+          pull-icon="JD"
+          container-id="refreshScroll"
+          :use-window="false"
+          :is-open-refresh="true"
+          :has-more="refreshHasMore"
+          @load-more="refreshLoadMore"
           @refresh="refresh"
         >
           <li
@@ -44,26 +45,19 @@
     <nut-cell>
       <ul class="infiniteUl" id="customScroll">
         <nut-infiniteloading
-          containerId="customScroll"
-          :useWindow="false"
-          :hasMore="customHasMore"
-          @loadMore="customLoadMore"
+          load-txt="loading"
+          load-more-txt="没有啦～"
+          container-id="customScroll"
+          :use-window="false"
+          :has-more="customHasMore"
+          @load-more="customLoadMore"
         >
           <li
             class="infiniteLi"
             v-for="(item, index) in customList"
             :key="index"
             >{{ item }}</li
           >
-
-          <template v-slot:loading>
-            <div class="loading">
-              <span>加载中...</span>
-            </div>
-          </template>
-          <template v-slot:unloadMore>
-            <div class="unload-more">没有数据啦 ~~</div>
-          </template>
         </nut-infiniteloading>
       </ul>
     </nut-cell>

diff --git a/src/packages/infiniteloading/doc.md b/src/packages/infiniteloading/doc.md
@@ -7,11 +7,11 @@
 ### 安装
 
 ```javascript
-    import { createApp } from 'vue';
-    import { InfiniteLoading } from '@nutui/nutui';
+  import { createApp } from 'vue';
+  import { InfiniteLoading } from '@nutui/nutui';
 
-    const app = createApp();
-    app.use(InfiniteLoading);
+  const app = createApp();
+  app.use(InfiniteLoading);
 ```
 
 ## 代码演示
@@ -22,9 +22,9 @@
 <ul class="infiniteUl" id="scroll">
     <nut-infiniteloading
         containerId = 'scroll'
-        :useWindow='false'
-        :hasMore="hasMore"
-        @loadMore="loadMore"
+        :use-window='false'
+        :has-more="hasMore"
+        @load-more="loadMore"
     >
         <li class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{item}}</li>
     </nut-infiniteloading>
@@ -62,11 +62,12 @@ setup() {
 ```html
 <ul class="infiniteUl" id="refreshScroll">
   <nut-infiniteloading
-    containerId="refreshScroll"
-    :useWindow="false"
-    :isOpenRefresh="true"
-    :hasMore="refreshHasMore"
-    @loadMore="refreshLoadMore"
+    pull-icon="JD"
+    container-id="refreshScroll"
+    :use-window="false"
+    :is-open-refresh="true"
+    :has-more="refreshHasMore"
+    @load-more="refreshLoadMore"
     @refresh="refresh"
   >
     <li
@@ -119,10 +120,10 @@ setup() {
 ```html
 <ul class="infiniteUl" id="customScroll">
     <nut-infiniteloading
-        containerId = 'customScroll'
-        :useWindow='false'
-        :hasMore="customHasMore"
-        @loadMore="customLoadMore"
+        container-id = 'customScroll'
+        :use-window='false'
+        :has-more="customHasMore"
+        @load-more="customLoadMore"
     >
         <li class="infiniteLi" v-for="(item, index) in customList" :key="index">{{item}}</li>
         <template v-slot:loading>
@@ -170,27 +171,23 @@ setup() {
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| hasMore         | 是否还有更多数据               | Boolean | true                |
-| threshold         | 距离底部多远加载 | Number | 200               |
-| useWindow | 将滚动侦听器添加到 window 否则侦听组件的父节点     | Boolean | true |
-| useCapture          | 是否使用捕获模式 true 捕获 false 冒泡                        | Boolean | false            |
-| containerId          | 在 useWindow 属性为 false 的时候，自定义设置节点ID                        | String | ''            |
-| unloadMoreTxt          | “没有更多数”据展示文案                        | String | '哎呀，这里是底部了啦'            |
-| isOpenRefresh        | 是否开启下拉刷新                         | Boolean | false                |
-
-### Slot
-
-| name | 说明           | 
-|--------|----------------|
-| loading  | 自定义“加载中”的展示形式 | 
-| unloadMore  | 自定义“没有更多数据”的展示形式 | 
-| refreshLoading  | 自定义下拉刷新中“加载中”的展示形式 | 
+| has-more         | 是否还有更多数据               | Boolean | `true`                |
+| threshold         | 距离底部多远加载 | Number | `200`               |
+| use-window | 将滚动侦听器添加到 window 否则侦听组件的父节点     | Boolean | `true` |
+| use-capture          | 是否使用捕获模式 true 捕获 false 冒泡                        | Boolean | `false`            |
+| container-id          | 在 useWindow 属性为 false 的时候，自定义设置节点ID                        | String | `''`            |
+| load-more-txt          | “没有更多数”据展示文案                        | String | `'哎呀，这里是底部了啦'`            |
+| is-open-refresh        | 是否开启下拉刷新                         | Boolean | `false`                |
+| pull-icon        | 下拉刷新[图标名称](#/icon)                        | String | `https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png`                |
+| pull-txt        | 下拉刷新提示文案                         | String | `松手刷新`                |
+| load-icon        | 上拉加载[图标名称](#/icon)                       | Boolean | `https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png`                |
+| load-txt        | 上拉加载提示文案                         | String | `加载中...`                |
 
 ### Events
 
 | 事件名 | 说明           | 回调参数     |
 |--------|----------------|--------------|
-| loadMore  | 继续加载的回调函数 | done 函数，用于关闭加载中状态 |
-| scrollChange  | 实时监听滚动高度 | 滚动高度 |
+| load-more  | 继续加载的回调函数 | done 函数，用于关闭加载中状态 |
+| scroll-change  | 实时监听滚动高度 | 滚动高度 |
 | refresh  | 下拉刷新事件回调 | done 函数，用于关闭加载中状态 |
 
diff --git a/src/packages/infiniteloading/index.scss b/src/packages/infiniteloading/index.scss
@@ -20,16 +20,16 @@
       }
       .top-text {
         font-size: 10px;
-        color: rgba(128, 128, 128, 1);
+        color: $text-color;
       }
     }
   }
   .nut-infinite-bottom {
     display: block;
     width: 100%;
     padding-top: 16px;
-    font-size: 12px;
-    color: rgba(200, 200, 200, 1);
+    font-size: $font-size-small;
+    color: $infinite-bottom-color;
     text-align: center;
 
     .bottom-box {
@@ -40,7 +40,7 @@
       }
       .bottom-text {
         font-size: 10px;
-        color: rgba(128, 128, 128, 1);
+        color: $text-color;
       }
     }
   }